スライダーを最後のスライドに到達した後の最初のスライドに戻すことができます。逆の場合も同様です。

Question

現在、私は自分自身にjavascriptを教えようとしていますが、今はスライダーを構築中です。これまでのところ、スライダを左右にスライドさせる方法を理解する必要がありました。これまでのところ私の問題は、最後のスライドに到達した後に最初のスライドに戻ったり、最後のスライドに到達した後に最初のスライドに戻ることができます。

ここに私が取り組んでいるコードがあります。

$(document).ready(function() { 
 

 
    var totalSlides = $('.slides li').length, 
 
    slidesWidth = $('.slides li').width(), 
 
    slideContainer = $('.slides'); 
 
    slideCount = 0; 
 
    slideItems = $('.slides li'); 
 

 
    slideContainer.width(slidesWidth * totalSlides); 
 

 
    $('.buttons .next').on('click', function() { 
 
    nextSlide(); 
 
    }); 
 

 
    $('.buttons .prev').on('click', function() { 
 
    prevSlide(); 
 
    }); 
 

 
    function nextSlide() { 
 
    slideCount++; 
 
    if (slideCount <= totalSlides) { 
 
     slideCount++; 
 
     console.log(slideCount); 
 
     slideItems.animate({ 
 
     left: '-=' + slidesWidth 
 
     }, 200); 
 
    } else if (slideCount === totalSlides) { 
 
     slideCount = 0; 
 
     slideItems.animate({ 
 
     left: '+=' + slideContainer 
 
     }, 200); 
 
    } 
 
    } 
 

 
    function prevSlide() { 
 
    if (totalSlides >= slideCount) { 
 
     slideCount--; 
 
     console.log(slideCount); 
 
     slideItems.animate({ 
 
     left: '+=' + slidesWidth 
 
     }, 200); 
 
    } 
 
    } 
 

 

 
    // function resetSlides() { 
 
    // if (slideCount === totalSlides) { 
 
    //  slideCount = 0; 
 
    //  slideItems.animate({ 
 
    //   left: '+=' + slideContainer 
 
    //  }, 200); 
 
    // } 
 
    // } 
 
})

.wrapper { 
 
    max-width: 1440px; 
 
    margin: 0 auto; 
 
} 
 

 
.timeline-container { 
 
    max-width: 1440px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    .slides { 
 
    position: absolute; 
 
    background-color: #ccc; 
 
    width: 1440px; 
 
    max-height: 300px; 
 
    top: 0; 
 
    left: 0; 
 
    li { 
 
     float: left; 
 
     max-width: 1440px; 
 
     width: 100%; 
 
     height: 300px; 
 
     position: relative; 
 
    } 
 
    } 
 
    .buttons { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    z-index: 10; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="timeline-container"> 
 
    <ul class="slides"> 
 
     <li> 
 
     <div class="image"> 
 
     </div> 
 
     <div class="content"> 
 
      1965 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="image"> 
 
     </div> 
 
     <div class="content"> 
 
      1968 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="image"> 
 
     </div> 
 

 
     <div class="content"> 
 
      1969 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    <ul class="buttons"> 
 
     <li class="prev">&lt;</li> 
 
     <li class="next">&gt;</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

function gotoSlide(position){ 
if(position === 'first'){ 

    console.log(slideCount); 
    slideItems.animate({ 
     left: '+=' + 0 
    }, 200); 
    slideCount=0; 
} 
else{ 
    console.log(slideCount); 
    slideItems.animate({ 
     left: '+=' + slidesWidth*(totalSlides-1) 
    }, 200); 
    slideCount=totalSlides; 
} 
} 

このコードを試してみて、ボタンのクリックにgotoSlide（yourPosition）を呼び出します。