如何重複幻燈片，如果它在JQuery結束

Question

我創建了一個flexbox傳送帶，當箭頭被點擊時，他們在每次點擊時右邊或左邊200px。

我正在嘗試做一個循環，當它到達最後時，它會再次以第一個「item」重新啓動。

$(document).ready(function(){ 
 
    $('.next-button').on('click', function(){ 
 
    $('.carousel-item').animate({"margin-left": "-=200px"}, 200); 
 
    }); 
 
    $('.prev-button').on('click', function(){ 
 
    $('.carousel-item').animate({"margin-left": "+=200px"}, 200); 
 
    }); 
 
});

.carousel-container { 
 
    height: 500px; 
 
    display: flex; 
 
    margin: 40px 20px; 
 
    
 
    position:relative; 
 
    overflow:hidden; 
 
    width:auto; 
 
    padding:0; 
 
    
 
    border: 1px solid red; 
 
    align-items: center; 
 
    
 
} 
 

 
.carousel-item { 
 
    height: 100%; 
 
    margin:5px; 
 
    margin-left:-200px; 
 
    padding:0; 
 
    
 
    -moz-box-orient:horizontal; 
 
    -ms-box-orient:horizontal; 
 
    -webkit-box-orient:horizontal; 
 
    -o-box-orient:horizontal; 
 
    box-orient:horizontal; 
 

 
    display:-moz-box; 
 
    display:-ms-box; 
 
    display:-webkit-box; 
 
    display:-o-box; 
 
    display:box; 
 
    
 
    list-style-type:none; 
 
} 
 

 
.item { 
 
    border:solid 1px #333; 
 
    margin-right:10px; 
 
    width:250px; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item > a { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: flex-end; 
 
} 
 

 
.prev-button, .next-button { 
 
    border: 1px solid green; 
 
    background-color: gray; 
 
} 
 

 
.navigation { 
 
    width: 60px; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.next-button:hover, .prev-button:hover { 
 
    background-color: red; 
 
} 
 

 
.navigation:active { 
 
    color: white; 
 
} 
 

 
.next-button { 
 
    right:0; 
 
} 
 

 
.prev-button { 
 
    left: 0; 
 
} 
 

 
/* .carousel-item li:nth-child(1) { 
 
    background-image: url('http://urbanphenomena.net/imgs/cover/bq2.jpg'); 
 
    background-size: cover; 
 
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel-container"> 
 
    <a class="prev-button navigation" href="#"><</a> 
 
    &nbsp; 
 
    <div class="carousel-item"> 
 
    <li class="item"><a href="#"> 1 </a></li> 
 
    <li class="item"><a href="#"> 2 </a></li> 
 
    <li class="item"><a href="#"> 3 </a></li> 
 
    <li class="item"><a href="#"> 4 </a></li> 
 
    <li class="item"><a href="#"> 5 </a></li> 
 
    
 
    <li class="item"><a href="#"> 6 </a></li> 
 
    <li class="item"><a href="#"> 7 </a></li> 
 
    <li class="item"><a href="#"> 8 </a></li> 
 
    <li class="item"><a href="#"> 9 </a></li> 
 
    <li class="item"><a href="#"> </a></li> 
 
    </div> 
 
    &nbsp; 
 
    <a class="next-button navigation" href="#">></a> 
 
</div>

Answer 1

你必須得到利潤率左旋轉木馬項，然後用if/else語句控制動畫

var margin-left=('.carousel-item').css("marginLeft"); 

Answer 2

$(document).ready(function() { 
 
    $('.next-button').on('click', function() { 
 
    if (parseInt($('.carousel-item').css("margin-left").slice(0, -2)) < -2000) { 
 
     $('.carousel-item').animate({ 
 
     "margin-left": "0px" 
 
     }, 200) 
 
    } else { 
 
     $('.carousel-item').animate({ 
 
     "margin-left": "-=200px" 
 
     }, 200); 
 
    } 
 
    }); 
 

 

 
    $('.prev-button').on('click', function() { 
 
    if (parseInt($('.carousel-item').css("margin-left").slice(0, -2)) > 0) { 
 
     $('.carousel-item').animate({ 
 
     "margin-left": "-2000px" 
 
     }, 200) 
 
    } else { 
 
     $('.carousel-item').animate({ 
 
     "margin-left": "+=200px" 
 
     }, 200); 
 
    } 
 
    }); 
 
});

.carousel-container { 
 
    height: 500px; 
 
    display: flex; 
 
    margin: 40px 20px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: auto; 
 
    padding: 0; 
 
    border: 1px solid red; 
 
    align-items: center; 
 
} 
 

 
.carousel-item { 
 
    height: 100%; 
 
    margin: 5px; 
 
    margin-left: -200px; 
 
    padding: 0; 
 
    -moz-box-orient: horizontal; 
 
    -ms-box-orient: horizontal; 
 
    -webkit-box-orient: horizontal; 
 
    -o-box-orient: horizontal; 
 
    box-orient: horizontal; 
 
    display: -moz-box; 
 
    display: -ms-box; 
 
    display: -webkit-box; 
 
    display: -o-box; 
 
    display: box; 
 
    list-style-type: none; 
 
} 
 

 
.item { 
 
    border: solid 1px #333; 
 
    margin-right: 10px; 
 
    width: 250px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item>a { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: flex-end; 
 
} 
 

 
.prev-button, 
 
.next-button { 
 
    border: 1px solid green; 
 
    background-color: gray; 
 
} 
 

 
.navigation { 
 
    width: 60px; 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.next-button:hover, 
 
.prev-button:hover { 
 
    background-color: red; 
 
} 
 

 
.navigation:active { 
 
    color: white; 
 
} 
 

 
.next-button { 
 
    right: 0; 
 
} 
 

 
.prev-button { 
 
    left: 0; 
 
} 
 

 

 
/* .carousel-item li:nth-child(1) { 
 
    background-image: url('http://urbanphenomena.net/imgs/cover/bq2.jpg'); 
 
    background-size: cover; 
 
} */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel-container"> 
 
    <a class="prev-button navigation" href="#"> 
 
    <</a> 
 
     &nbsp; 
 
     <div class="carousel-item"> 
 
     <li class="item"><a href="#"> 1 </a></li> 
 
     <li class="item"><a href="#"> 2 </a></li> 
 
     <li class="item"><a href="#"> 3 </a></li> 
 
     <li class="item"><a href="#"> 4 </a></li> 
 
     <li class="item"><a href="#"> 5 </a></li> 
 

 
     <li class="item"><a href="#"> 6 </a></li> 
 
     <li class="item"><a href="#"> 7 </a></li> 
 
     <li class="item"><a href="#"> 8 </a></li> 
 
     <li class="item"><a href="#"> 9 </a></li> 
 
     <li class="item"> 
 
      <a href="#"> </a> 
 
     </li> 
 
     </div> 
 
     &nbsp; 
 
     <a class="next-button navigation" href="#">></a> 
 
</div>

Answer 3

$(document).ready(function() { 
 
    var marginLeft = 0; 
 

 
    $('.next-button').on('click', function() { 
 
    if (Math.abs(marginLeft) < (200) * ($('li').length)) { 
 
     marginLeft -= 200; 
 
     $('.carousel-item').animate({ 
 
     "margin-left": "-=200px" 
 
     }, 200); 
 
    } else { 
 
     //reset 
 
     marginLeft = 0; 
 
     $('.carousel-item').animate({ 
 
     "margin-left": "0" 
 
     }, 200); 
 
    } 
 
    }); 
 
    $('.prev-button').on('click', function() { 
 
    if (Math.abs(marginLeft) > (200) * ($('li').length)) { 
 
     marginLeft = (200) * ($('li').length); 
 
     $('.carousel-item').animate({ 
 
     "margin-left": marginLeft + "px" 
 
     }, 200); 
 

 
    } else { 
 
     marginLeft -= 200; 
 
     $('.carousel-item').animate({ 
 
     "margin-left": marginLeft + "px" 
 
     }, 200); 
 

 
    } 
 
    }); 
 
});

這可能不是確切的解決您的問題，但一個想法，你會如何計算有多少左/右貴格根據您的需要已經動畫和應用一些邏輯來重置這些值。