Question

Can any one tell me how can i implement a auto slider/scroller in my web page. The slider should show dynamic data from a database. (Ex : Hot jobs tab in the plipl.com site’s home page (www.plipl.com) . Is there any easy way to do this with jQuery ?

Answer 1

The following is nothing special, just quickly tried it. There’s 2 div’s that it continously switches between, hopefully give you a head start. You could use the same idea and load content into div’s via AJAX.

Code snippet:

css:

div{width:100px;height:100px;}
#container{overflow:hidden;border:1px solid black;}
#left{background:red;float:left;}
#right{background:green;float:right;}

jScript:

$(function() {
        //Call scrollContent function every 3secs
    var timerUp = setInterval(scrollContent, 3000);

    function scrollContent(){
        //Toggle top between 100 and 0
        var top = $("#container").scrollTop() == 0 ? 100 : 0;
        $("#container").scrollTop(top);
    }
});

markup:

<div id="container">
        <div id="left">
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </div>
        <div id="right">
            <ul>
                <li>Five</li>
                <li>Six</li>
                <li>Seven</li>
                <li>Eight</li>
            </ul>
        </div>
    </div>