Question

I would like to create a simple content slider that would slide content continuously with a pause between the slides.
I would like to create this content inside a SharePoint Web Part (this is just a detail of course)

I have the following markup:

<div id="slide-container"></div>

and, on DOM ready, I am executing the following code:

var slider = $('#slide-container');
var wsUrl = '<%= SPContext.Current.Site.Url %>' + wsBaseUrl + 'MyWS.asmx/Monitor';
$.get('<%= SPContext.Current.Site.Url %>' + templateBaseUrl + 'tmpl_Monitorable.html', function (template) {
    $.ajax({
        type: "post", url: wsUrl, data: JSON.stringify({}), contentType: "application/json; charset=utf-8",
        dataType: "json", async: false,
        success: function (data) {
            var all = data.d;
            $.each(all, function (key, value) {
                var slide = $.tmpl(template, value);
                var div = $("<div></div>").append(slide);
                slider.append(div);
            });
        }
    });
});

Basically I create a series of DIV elements and add them inside the container DIV. After the code the markup will be as follow:

<div id="slide-container">
    ...
    <div class="ui-widget">
        <div class="ui-widget-header">${Title}</div>
        <div class="ui-widget-content">
            <div style="padding-left: 14px;height:18px;">New records<div style="float: right; width: 40px; text-align:right;padding-right: 3px;">${NewRecords}</div></div>
            <div style="padding-left: 14px;height:18px;">Modified records<div style="float: right; width: 40px; text-align:right;padding-right: 3px;">${ModifiedRecords}</div></div>
            <div style="margin: 10px 2px 6px 2px; text-align:right;">Last updated at ${LastUpdated}</div>
        </div>
    </div>
    ...
</div>

Can somebody give me any help on how to slide, every 3 seconds, the content of the slide-container div with jQuery?

Answer 1

I assume your divs inside .ul-widget-content are positioned horizontally one next to the other and you want them to slide horizontally.

You can do something like this, changing the margin-left property of the .ui-widget-content div so it shows the next item every 3 seconds:

function scroll() {

    $( '.ui-widget-content' ).animate({

        'margin-left': '-=' + $( '#slide-container' ).width()

    }, 500, function () {

        setTimeout( scroll, 3000 );

    };

}

This way you only have to call the function scroll() one time, and it will self call itself after the animation (scrollin) ended, with a pause of 3 seconds (3000 milliseconds in the example).

Hope it helps.