CODEWITHSUNDEEP
javascriptjquery
sidewinder
sidewinder

Reputation: 3163

Help with modifying my custom JQuery slider to allow continous scrolling

You can view my custom slider here: http://www.awaismuzaffar.com/examples/index.html

And below is the JQuery code for it:

 $(document).ready(function() {

        // Slider Function

        var slideWidth =  $('div.slide').width();

        // Set the left position of each div element

        $('div.slide').each(function(index){
            $(this).css('left', index * slideWidth ); // Multiply each div element by the index(0, 1 etc) so each div is placed inline
        });

        // Next step is to animate the div elements

        var clickCount = 1;
        var slideCount = $('div.slide').length;

        // Set the previous button to hide when loading with the first slide

        if(clickCount == 1){
            $('a#previous-button').css('background-color', '#cccccc');
        }

        $('a#next-button').click(function() {
           if(clickCount < slideCount) {
                $('div.slide').animate({"left":"-=" + slideWidth}, 'slow');
                $('a#previous-button').css('background-color', '#ffffff');
                clickCount++;
            }
            if(clickCount == slideCount) {
                $('a#next-button').css('background-color', '#cccccc'); // Hide or grey out button
            }
        });

        $('a#previous-button').click(function() {
            if(clickCount > 1){
                $('div.slide').animate({"left":"+=" + slideWidth}, 'slow');
                $('a#next-button').css('background-color', '#ffffff');
                clickCount--;
            }
            if(clickCount == 1){
                $('a#previous-button').css('background-color', '#cccccc'); // Hide or grey out button
            }
        });
    });

I am trying to modify this slider to allow continous scrolling.

I am not sure exactly how to achieve this, I am assuming I need to use append, but I am not sure how to make use of it.

Thanks.

Upvotes: 1

Views: 239

Answers (3)

Demian Brecht
Demian Brecht

Reputation: 21368

Here's a solution (somewhat like Shaz's), just less code :):

$(document).ready(function(){    
    $('#previous-button').click(function(){slidePanel(-1)});
    $('#next-button').click(function(){slidePanel(1)});

    var n = 0;
    var animating = false;
    $('#slide-'+n).css('display', 'block');
    function slidePanel(delta)
    {
        if(!animating)
        {
            animating = true;
            var d = (delta > 0 ? $('#slide-'+n).width()*-1 :  $('#slide-'+n).width());

            $('#slide-'+n).animate({
                left: "+="+d
            }, 'slow', function() { $(this).css('display', 'none'); animating = false; });

            n = (n + delta) % $('div.slide').length;
            n = n < 0 ? $('div.slide').length + n : n;

            $('#slide-'+n).css('left', $('#slide-container').offset().left +(d*-1));
            $('#slide-'+n).css('display', 'block');
            $('#slide-'+n).animate({
                left: 0
            }, 'slow');
        }
    }
});

Check out the sample here.

(I know there's a way to figure out the "current slide" with a one liner equation, but I think I'm brain dead atm :P)

(Edited to account for repeatedly clicking)

Upvotes: 0

Shaz
Shaz

Reputation: 15867

Try something like this: http://fiddle.jshell.net/Shaz/dsBkf/

Upvotes: 0

Milimetric
Milimetric

Reputation: 13549

You're doing things a little manually, I'm thinking someone else might've solved the problem. But in any case, in your click next button, you'd need to load in additional content when you hit the end. So if I were you, I'd do something like this:

    $('a#next-button').click(function() {
        ...

        if(clickCount == slideCount) {
            $('a#next-button').css('background-color', '#cccccc');
            $.get(moreContentUrl, objectRepresentingCurrentScrollPosition, loadContent);
            spinner.show(); // show some kind of spinner here (you can also hook up a default spinner on all ajax events with a global ajax handler
        }
    });

    function loadContent(response) {
        // append your content (your controller should return just the <div class="slide" /> elements, and give them a class="slide newSlide" so you can distinguish them below
        // you can also do client side templating here. would be more efficient, then just return the items as objects instead of html
        $('#slide-container').append(response.itemsHtml); 
        // slide all new divs right
        $('div.newSlide').animate({"left":"+=" + slideWidth}, 'fast');
        $('div.newSlide').removeClass('newSlide');

        // update variables and un-grey the next button
        $('a#previous-button').css('background-color', '#ffffff');
        slideCount += response.itemCount;

        // hide the spinner shown when starting the load
        spinner.hide();
    }

Give it a shot, hope it works. Now, to clean up that code a little bit, I'd suggest using css classes instead of inline background colors, etc.

Upvotes: 1

Related Questions