Jqueryスライダの前のボタン

このコードの問題は前のボタンにあります。ユーザーが最初のスライドの前を押すと、数秒間空白のスライダーが表示され、最後のスライドが表示されます。あなたはあなたのコードが少しスライダーのために混同しているJqueryスライダの前のボタン
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="/scripts/SliderControl.js"></script> 
    <link href="/Styles/Sliders.css" rel="stylesheet" /> 
</head> 
<body> 
    <div class="container"> 
     <div class="header"> 
      <h1 class="text-muted">jQuery Basic Slider</h1> 
     </div> 
     <div id="slider"> 
      <ul class="slides"> 
       <li class="slide"> 
        <img src="Images/Image1.jpg" alt="About Us" width="720" height="400" /> 
       </li> 
       <li class="slide"> 
        <img src="Images/Image2.jpg" alt="About Us" width="720" height="400" /> 
       </li> 
       <li class="slide"> 
        <img src="Images/Image3.jpg" alt="About Us" width="720" height="400" /> 
       </li> 
       <li class="slide"> 
        <img src="Images/Image4.jpg" alt="About Us" width="720" height="400" /> 
       </li> 
       <li class="slide"> 
        <img src="Images/Image6.jpg" alt="About Us" width="720" height="400" /> 
       </li> 
       <li class="slide"> 
        <img src="Images/Image1.jpg" alt="About Us" width="720" height="400" /> 
       </li> 
      </ul> 
     </div> 

     <img id="Next" src="Images/RightArrow.png" 
      class="img-responsive NextButton" /> 
     <img id="Previous" src="Images/LeftArrow.png" 
      class="img-responsive PreButton" /> 
    </div> 
</body> 
</html> 


#slider { 
    width: 720px; 
    height: 400px; 
    overflow: hidden; 
} 

#slider .slides { 
    display: block; 
    width: 6000px; 
    height: 400px; 
    margin: 0; 
    padding: 0; 
} 

#slider .slide { 
    float: left; 
    list-style-type: none; 
    width: 720px; 
    height: 400px; 
} 


#Next 
{ 
    opacity: 0.4; 
    filter: alpha(opacity=20); 
} 

    #Next:hover 
    { 
     cursor: pointer; 
     opacity: 0.8; 
     filter: alpha(opacity=80); 
    } 

#Previous 
{ 
    opacity: 0.4; 
    filter: alpha(opacity=20); 
} 

    #Previous:hover 
    { 
     cursor: pointer; 
     opacity: 0.8; 
     filter: alpha(opacity=80); 
    } 

#slider .NextButton 
{ 
    position: absolute; 
    top: 50%; 
    right: 2%; 
} 

#slider .PreButton 
{ 
    position: absolute; 
    top: 50%; 
    left: 2%; 
} 




'use strict'; 

$(function() { 

    //settings for slider 
    var width = 720; 
    var animationSpeed = 1000; 
    var pause = 3000; 
    var currentSlide = 1; 

    //cache DOM elements 
    var $slider = $('#slider'); 
    var $slideContainer = $('.slides', $slider); 
    var $slides = $('.slide', $slider); 

    var interval; 

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

    $slideContainer 
     .on('mouseenter', pauseSlider) 
     .on('mouseleave', startSlider); 

    startSlider(); 

    $('#Next').click(function() { 

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

    $('#Previous').click(function() { 

     //if (currentSlide === 1) { 
     // $slideContainer.animate({ 'margin-left': -1 * width * ($slides.length -2)}, animationSpeed, function() { 
     //  currentSlide = $slides.length - 1; 
     // }); 
     //} 
     //else { 
      $slideContainer.animate({ 'margin-left': '+=' + width }, animationSpeed, function() { 
       if (--currentSlide === 0) { 
        currentSlide = $slides.length - 1; 
        $slideContainer.css('margin-left', -1 * width * ($slides.length - 2)); 

       } 
       }); 
      //} 
     }); 


    $('#Next') 
     .on('mouseenter', pauseSlider) 
     .on('mouseleave', startSlider); 

    $('#Previous') 
     .on('mouseenter', pauseSlider) 
     .on('mouseleave', startSlider); 

});
出典
2016-07-16 jim finegan
あなたのCSSコードは「