Creating slider and slide will not reset position upon sliding left

Question

'use strict';
$(function(){
    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;



    var $slider = $('#slider');
    var $slideContainer = $slider.find('.slides');
    var $slides = $slideContainer.find('.slide');
    var $slidesleft = $slideContainer.find('.left');
    var $slidesright = $slideContainer.find('.right');

    var interval;

    function startSlider(){
    interval = setInterval(function(){
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
                    currentSlide++;
                    if (currentSlide === $slides.length) {
                            currentSlide = 1;
                            $slideContainer.css('margin-left', 0); 
                    }
            });
    },pause);
    }



    function stopSlider(){
            clearInterval(interval);
    };
    $('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider);

startSlider();


    $('#slidebttn .right').on('click',      function (){
            $slideContainer.animate({'margin-left': '-='+width}, animationSpeed,function(){
                    currentSlide++;
                    if (currentSlide === $slides.length) {
                            currentSlide = 1;
                            $slideContainer.css('margin-left', 0); 
                    }
            });
    }       );

    $('#slidebttn .left').on('click',       function (){
            $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){
                    currentSlide--;
                    if (currentSlide === 0) {
                            currentSlide = $slides.length;
                            $slideContainer.css('margin-left', 720);       
                    }

            });
    }       );
});

Ok here is my code I am working with. Everything works fine until I try and slide my slider to the left. It will not repeat back to the right position. As of right now the slide right button works just fine with no problems but it refuses to slide left. Any reason I it might not be sliding left appropriately?

Answer 1

Lets get started!

For your html: The common practice is to clone the first image after the last and the last before the first so that you can create the illusion of continuous sliding. You forgot to put your last image before your first! (You can use https://api.jquery.com/clone/ i didn't in the fiddle ).

So, you need to start from the second slide that's why i added the margin-left:750px in the slides element.

Your CSS: everything its ok.

Your javascript: Please read the comments in the js code.The code could be better but i think its gonna be easier to do it now. If you have any questions don't hesitate to ask!

 'use strict'; $(function () { var width = 720; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1; var $slider = $('#slider'); var $slideContainer = $slider.find('.slides'); var $slides = $slideContainer.find('.slide'); var $slidesleft = $slideContainer.find('.left'); var $slidesright = $slideContainer.find('.right'); var interval; function startSlider() { interval = setInterval(function () { currentSlide++; //if this is the last image5 then go to the first image1 and current is slide 2 if (currentSlide == ($slides.length)) { $slideContainer.css('margin-left', "-" + width + "px"); currentSlide = 2; } // Go to the next slide as usual $slideContainer.animate({ 'margin-left': "-" + (width * currentSlide) + "px" }, animationSpeed); }, pause); } function stopSlider() { clearInterval(interval); }; $('#slidebttn').on('mouseenter', stopSlider).on('mouseleave', startSlider); startSlider(); $('#slidebttn .right').on('click', function () { currentSlide++; //if this is the last image5 then go to the first image1 and current is slide 2 if (currentSlide == ($slides.length)) { $slideContainer.css('margin-left', "-" + width + "px"); currentSlide = 2; } // Go to the next slide as usual $slideContainer.animate({ 'margin-left': "-" + (width * currentSlide) + "px" }, animationSpeed); }); $('#slidebttn .left').on('click', function () { currentSlide--; // Go to the prev slide as usual $slideContainer.animate({ 'margin-left': "-" + (width * currentSlide) + "px" }, animationSpeed, function () { // If you are at the first image5 then go to the last and current slide is slide 6 (slides-2) if ($slideContainer.css('margin-left') == '0px') { $slideContainer.css('margin-left', "-" + width * ($slides.length - 2) + "px") currentSlide = $slides.length - 2; } }); }); }); 

 body { margin:0px; } @font-face { font-family: speculum; src: url(font/speculum.tff); } .header { background:#c1d4ff; margin:15px auto; text-align:center; height:300px; width:relative; } .selection { margin:10px auto; position:relative; height:relative; width:relative; min-width: 800px; } .footer { margin:25px auto; text-align:center; height:150px; width: 80%; background: #c1d4ff; min-width: 400px; } .itemlink { top:75px; position:relative; right:228px; float:left; } .itemlink:before { content:"Link: " } .itemprice { top:95px; position:relative; right:340px; float:left; } .itemprice:before { content:"Price: " } .iteminfo { top:15px; position:relative; right:20%; float:right; } .iteminfo:before { content:"Additional Info:"; text-decoration:underline; } .itemcode { top:55px; position:relative; right:147px; float:left; } .itemcode:before { content:"Item Code: " } .itemname { top:35px; position:relative; left:42px; float:left; } .itemname:before { content:"Name: " } #parts img { border: 3px double #c1d4ff; margin-top:20px; float:left; height:100px; width:100px; } #parts { height:150px; margin:0 auto; width:80%; background:#ffffff; } #parts ul { list-style: none; } #parts ul li { } #parts ul li ul { } #parts ul li ul li { } #main img { margin-top:20px; float:left; height:100px; width:100px; } #main { padding-bottom:10px; height:relative; margin:0 auto; width:80%; background:#ffffff; } #main ul { list-style: none; } #main .para { color:#5358e5; letter-spacing: -4px; font-family:speculum; text-align:justify; padding-top:10px; margin-right:100px; position:relative; left:20px; } #main .mainhead { color:#007e32; text-align:left; font-family:speculum; text-decoration:underline; font-weight:bold; font-size: 30px; } #sidebar { border: 1px dashed #ffffff; z-index:100; position:fixed; width:100%; text-align:center; background:#3366FF } #sidebar ul { text-align: center; display: inline; margin: 0; padding: 14px 4px 17px 0px; list-style: none; } #sidebar ul li { color:#FFFFFF; font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #3366FF; cursor: pointer; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } #sidebar ul li:hover { background: #4775FF; color: #FFFFFF; } #sidebar ul li.active { color:#FFFFFF; font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #5983FF; cursor: pointer; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } #sidebar ul li.active:hover { background: #4775FF; color: #FFFFFF; } #sidebar ul li ul { background: #3366FF; padding: 0; position: absolute; top: 48px; left: 0px; width: 150px; padding-right: 4px; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; } #sidebar ul li ul li { background: #3366FF; display: block; color: #FFFFFF; } #sidebar ul li ul li:hover { background: #4775FF; color: #FFFFFF; } #sidebar ul li ul li.active { background: #5983FF; display: block; color: #FFFFFF; } #sidebar ul li ul li.active:hover { background: #4775FF; color: #FFFFFF; } #sidebar ul li:hover ul { display: block; opacity: 1; visibility: visible; } #slider { z-index:1; float:none; margin:0 auto; position:relative; width:720px; height:400px; overflow:hidden; } #slider img { height:400px; width:720px; } #slider .slides { display:block; height:400px; width:6000px; margin:0; padding:0; } #slider .slide { float:left; list-style-type:none; width:720px; height:400px; } #slidebttn { z-index:2; transform:translateY(-400px); width:800px; position:relative; margin:0 auto; float:none; height:400px; } #slidebttn .left { position:relative; margin:0 auto; float:left; height:400px; width:40px; } #slidebttn .right { background: transparent; cursor:pointer; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75); text-shadow: 4px 4px 5px #000000; font-weight: bold; line-height: 400px; text-align: center; position:relative; margin:0 auto; float:right; height:400px; width:40px; } #slidebttn .right:hover { text-shadow: 1px 1px 5px #000000; box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.75); } #slidebttn .right:active { text-shadow: 2px 2px 5px #000000; box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body style="background-image:url(http://westquesttech.com/images/background.jpg)"> <div id="sidebar"> <ul> <li class="active"><span>Home</span> </li> <li onclick="location.href='philosophy.html';"><span>Philosophy</span> </li> <li><span>Shop</span> <ul> <li onclick="location.href='shop.html';">Computers</li> <li onclick="location.href='shop2.html';">Accessories</li> <li onclick="location.href='shop3.html';">Parts</li> </ul> </li> <li onclick="location.href='contact.html';"><span>Contact</span> </li> </ul> </div> </br> </br> <div class="header"> <img src="http://westquesttech.com/images/westquestlogo.png"> </div> <div style="height:450px;" class="selection"> <div id="slider"> <ul class="slides" style='margin-left:-720px'> <li class="slide"> <img src="http://westquesttech.com/images/image5.jpg" /> </li> <li class="slide"> <img src="http://westquesttech.com/images/image1.jpg" /> </li> <li class="slide"> <img src="http://westquesttech.com/images/image2.jpg" /> </li> <li class="slide"> <img src="http://westquesttech.com/images/image3.jpg" /> </li> <li class="slide"> <img src="http://westquesttech.com/images/image4.jpg" /> </li> <li class="slide"> <img src="http://westquesttech.com/images/image5.jpg" /> </li> <li class="slide"> <img src="http://westquesttech.com/images/image1.jpg" /> </li> </ul> </div> <div id="slidebttn"> <button class="left"> <</button> <button class="right">></button> </div> </div> <div class="footer"></div> </html>