Question

I have nearly finished off a website for a client at work, which has a large full width dynamic slider on the home page. As they gave few specifications, currently the slider is very basic; it simply scrolls left to right by changing the left CSS property on the UL. Obviously, because of this it will scroll suddenly back to the beginning once it reaches the end, which the clients do not want apparently.

I’m not an expert with jQuery, and I was wondering how I could easily change this slider so that it will scroll endlessly instead.

It also uses a simple navigation, it has four slides, and has a little controls bar at the bottom with the title of each on it to quick jump to specific slides. It also has an arrow which follows the latest slide.

I’ve found solutions to make it loop, but I can’t see any which look compatible with the navigation. I’d really like to not have to start again from the ground up, will that be possible?

Here’s all the code I’m currently using, if you would like the CSS I can post that too but I didn’t think it was too needed.

Thanks a lot in advance.

EDIT: jsFiddle Result

http://jsfiddle.net/hCXhZ/5/embedded/result/

http://jsfiddle.net/hCXhZ/5/

You may need to make the results section larger to compensate for the responsive CSS. I just linked the stylesheet as I was feeling lazy, and couldn’t be arsed to find all the sections in the file…

jQuery

$(function(){ 
    var screenWidth = $(window).width();
    $("ul.slides li").css("width",screenWidth);

    $(window).resize(function() {
        var SlideWidth = $("ul.slides li").width();
        var screenWidth = $(window).width();
        $("ul.slides li").css("width",screenWidth);
    });



    $('.slider-controls li').click(function(){
        var slideToID = $(this).children().attr('rel');
        var SlideWidth = $("ul.slides li").width();
        var slideTo = (slideToID * SlideWidth) - SlideWidth;
        var arrowTo = 85+(240*(slideToID-1));


        $('.slider-controls li').removeClass('active');
        $(this).addClass('active');
        $('ul.slides').animate({"left": -slideTo});
        $('div.slider-arrow').animate({"left": arrowTo});
    });

});

function slider() {

    var SlideWidth = $("ul.slides li").width();
    var SlideCount = $("ul.slides li").size();
    var TotalWidth = SlideWidth * SlideCount;
    var StopPos = TotalWidth - SlideWidth;
    var CurPos  = $("ul.slides").position().left;


    if (CurPos <= -StopPos) {
        $("ul.slides").animate({"left": "0"});
    }
    if (CurPos > -StopPos) {
        $("ul.slides").animate({"left": "-="+SlideWidth+"px"});
    }

    var slideId = (-CurPos + SlideWidth) / SlideWidth;
    var fSlideId = slideId + 1;
        var arrowTo = 85+(240*(fSlideId-1));

    $('.slider-controls li').removeClass('active');
        if (fSlideId < 5) {
            $('.slider-controls li.slide'+fSlideId+'').addClass('active');
            $('div.slider-arrow').animate({"left": arrowTo});
        }
        if (fSlideId == 5) {
            $('.slider-controls li.slide1').addClass('active');
            $('div.slider-arrow').animate({"left": 85});

        }
};

$(function(){ 
    var SlideWidth = $("ul.slides li").width();
    var SlideCount = $("ul.slides li").size();
    var TotalWidth = SlideWidth * SlideCount;
    var StopPos = TotalWidth - SlideWidth;
    var CurPos  = $("ul.slides").position().left;


    timeout = setInterval('slider()', 6000);

    $(window).width();

    $("ul.slides").css("width",TotalWidth);


    $(".controls .leftarrow").click(function() {
    var CurPos  = $("ul.slides").position().left;
        if (CurPos >= 0){
            $("ul.slides").animate({"left": "-"+StopPos})
        }
        if (CurPos < 0){
            $("ul.slides").animate({"left": "+="+SlideWidth+"px"})
        }
    });

    $(".controls .rightarrow").click(function() {
    var CurPos  = $("ul.slides").position().left;

        if (CurPos <= -StopPos) {
            $("ul.slides").animate({"left": "0"})
        }
        if (CurPos > -StopPos) {
            $("ul.slides").animate({"left": "-=" + SlideWidth + "px"})
        }
    });

    $(".slider-controls").hover(
      function () {
        clearInterval(timeout);
      }, 
      function () {
        timeout = setInterval('slider()', 4000);
      }
    );

});

HTML

 <div id="slider">
    <ul class="slides">
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Innovation.jpeg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Modern Innovation</h1>
                        <p>                     <a href=""></a></p>
                    </div>
                </div>
            </li>                               
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/specialist-equipment.jpg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Specialist Equipment</h1>
                        <p>NP Seymour have a range of packhouse and grading equipment 
<br />                      <a href="http://www.google.com">Click here to view our products</a></p>
                    </div>
                </div>
            </li>                               
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Home-Page-slider-3.jpeg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Service and quality</h1>
                        <p>Purveyors of high quality, extremely useful Agricultural Machinery and accessories.<br />                        <a href="http://www.google.com/">Click here to view our products</a></p>
                    </div>
                </div>
            </li>                               
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/slide-11.jpg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Latest Technology</h1>
                        <p>We specialise in orchard, vineyard and hop machinery<br />                       <a href="http://www.google.com">Click here to view our products</a></p>
                    </div>
                </div>
            </li>                               
            </ul>
 </div>
 <div class="slider-controls">
    <ul class="container_12">
        <div class="slider-arrow"></div>

        <li class="alpha active slide1 grid_3">
            <a href="javascript:;" rel="1">Modern Innovation</a>
        </li>

        <li class="slide2 grid_3">
            <a href="javascript:;" rel="2">Specialist Equipment</a>
        </li>

        <li class="slide3 grid_3">
            <a href="javascript:;" rel="3">Service and quality</a>
        </li>

        <li class=" omega slide4 grid_3">
            <a href="javascript:;" rel="4">Latest Technology</a>
        </li>

    </ul>
 </div>

Answer 1

Managed to get it working using a script found here: http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Although this had the desired affect of an infinite scrolling slider, I couldn’t figure out how to make jump-to navigation work properly, which took away quite a lot from the aesthetic of the site in my opinion… But what ever, customer’s always right eh?

$(function() {

    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);   

    //grab the width and calculate left value\
    var screenWidth = $(window).width();
    $("ul.slides li").css("width",screenWidth);
    $("ul.slides li").width(screenWidth);   
    var fullWidth = $('ul.slides li').size() * $('ul.slides li').width();
    $('ul.slides').css('width', fullWidth);


    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button
    $('ul.slides li:first').before($('ul.slides li:last'));
    $('ul.slides li:first').before($('ul.slides li:last'));

    //set the default item to the correct position 
    $('ul.slides').css({'left' : left_value});

    //if user clicked on prev button
    $('a.controls.left').click(function() {

        //get the right position            
        var left_indent = parseInt($('ul.slides').css('left')) + item_width;

        //slide the item            
        $('ul.slides').animate({'left' : left_indent}, 1000,function(){    

            //move the last item and put it as first item               
            $('ul.slides li:first').before($('ul.slides li:last'));           

            //set the default item to correct position
            $('ul.slides').css({'left' : left_value});

        });

        //cancel the link behavior            
        return false;

    });


    //if user clicked on next button
    $('a.controls.right').click(function() {

        //get the right position
        var left_indent = parseInt($('ul.slides').css('left')) - item_width;

        //slide the item
        $('ul.slides').animate({'left' : left_indent}, 1000, function () {

            //move the first item and put it as last item
            $('ul.slides li:last').after($('ul.slides li:first'));                  

            //set the default item to correct position
            $('ul.slides').css({'left' : left_value});

        });

        //cancel the link behavior
        return false;

    });        

    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('ul.slides').hover(

        function() {
            clearInterval(run);
        }, 
        function() {
            run = setInterval('rotate()', speed);   
        }
    ); 

});


//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

        //get the right position
        var left_indent = parseInt($('ul.slides').css('left')) - item_width;

        //slide the item
        $('ul.slides').animate({'left' : left_indent}, 1000, function () {

            //move the first item and put it as last item
            $('ul.slides li:last').after($('ul.slides li:first'));                  

            //set the default item to correct position
            $('ul.slides').css({'left' : left_value});

        });
}