La création du curseur et de la glissière ne réinitialisera pas la position lors du glissement vers la gauche

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, voici mon code avec lequel je travaille. Tout fonctionne bien jusqu'à ce que j'essaie de faire glisser mon curseur vers la gauche. Il ne répètera pas à la bonne position. En ce moment, le bouton droit de la diapositive fonctionne très bien sans problème, mais il refuse de glisser vers la gauche. Y a-t-il une raison pour que ça ne glisse pas correctement?

Answer 1

Commençons!

Pour votre html: La pratique courante consiste à cloner la première image après la dernière et la dernière avant la première afin de créer l'illusion d'un glissement continu. Vous avez oublié de mettre votre dernière image avant la première! (Vous pouvez utiliser https://api.jquery.com/clone/ je n'ai pas dans le fiddle).

Donc, vous devez commencer à partir de la deuxième diapositive, c'est pourquoi j'ai ajouté la marge gauche: 750px dans l'élément slides.

Votre CSS: tout est ok.

Votre javascript: S'il vous plaît lire les commentaires dans le code js.Le code pourrait être mieux mais je pense que ça va être plus facile de le faire maintenant. Si vous avez des questions, n'hésitez pas à demander!

'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>