香草JavaScript傳送帶 - 如何停止當沒有更多的幻燈片

Question

我想建立一個死簡單的傳送帶。

每張幻燈片的寬度都是25％ - 因此總是會在視口內顯示4個幻燈片。

到目前爲止，我有：一個向左滑動&右側的按鈕，這遞增/每次點擊遞減transform: translateX 25％。這是要將列表中的第一張或最後一張幻燈片從視口中移出，併爲下一張幻燈片騰出空間。

我無法將我的頭圍繞在如何在沒有更多幻燈片時讓滑塊停止移動。

我計算的slideList的總寬度，而且我想，我需要做的是這樣的：

「如果總slideList寬度已經移動向左或主容器的權利，禁止「

編輯：我忘了提及，我總是希望在視口內有4張幻燈片。因此，只要slideList的第一個或最後一個slideItem位於視口內，我希望它停止遞增/遞減25％。否則，slideList將被推出視口。

(function() { 
 
\t var slideList = document.querySelector(".slide-list"); 
 
\t var slideItems = document.querySelectorAll(".slide-list li"); 
 
\t var btnSlideLeft = document.querySelector(".btn-slide-left"); 
 
\t var btnSlideRight = document.querySelector(".btn-slide-right"); 
 
\t var numberOfSlides = slideItems.length; 
 
\t var totalSlideListWidth = slideList.getBoundingClientRect().width; 
 
\t var moveAmount = 25; // for translateX left/right 
 
\t var initial = 0; 
 
\t 
 
\t btnSlideLeft.addEventListener("click", function() { 
 
\t \t initial -= moveAmount; 
 
\t \t slideList.style.transform = "translateX(" + initial + "%)"; 
 
\t }); 
 

 
\t btnSlideRight.addEventListener("click", function() { 
 
\t \t initial += moveAmount; 
 
\t \t document.querySelector(".slide-list").style.transform = 
 
\t \t \t "translateX(" + initial + "%)"; 
 
\t }); 
 
})();

.page-container { 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t overflow: hidden; 
 
} 
 

 
.js-carousel { 
 
\t overflow: hidden; 
 
\t list-style: none; 
 
    margin: 0 auto; 
 
\t max-width: 1000px; 
 
\t font-size: 0; 
 
\t white-space: nowrap; 
 
} 
 

 
.slide-list li { 
 
\t display: inline-block; 
 
\t height: 150px; 
 
\t width: 25%; 
 
} 
 

 
.image { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t object-fit: cover; 
 
} 
 

 
.slide-nav { 
 
\t padding: 2rem; 
 
\t margin: 1rem auto; 
 
\t max-width: 150px; 
 
} 
 
.btn { 
 
\t cursor: pointer; 
 
\t padding: 1rem 1.5rem; 
 
\t border: 0; 
 
\t margin-left: .25rem; 
 
\t margin-right: .25rem; 
 
}

<div class="page-container"> 
 
\t 
 
\t 
 
\t <div class="js-carousel"> 
 
    <ul class="slide-list"> 
 

 
    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--3.jpg" alt=""></li> 
 
\t  
 
    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii-wallpaper-17.jpg" alt=""></li> 
 

 
\t  
 
\t  <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--6.jpg" alt=""></li> 
 
\t  \t  
 
\t  <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-7.jpg" alt=""></li> 
 
\t  
 
\t  
 
\t  <li><img class="image" src="https://wallscover.com/images/jurassic-world-10.jpg" alt=""></li> \t  
 
\t \t  <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-10.jpg" alt=""></li>  
 
\t 
 
    </ul> 
 

 
<div class="slide-nav"> 
 
\t <button class="btn btn-slide-left">Left</button> 
 
<button class="btn btn-slide-right">Right</button> 
 
</div> 
 
</div> 
 
</div>

有Github上許多轉盤的例子來看看，但我無法找到一個是我現在的JS技術水平很簡單。

任何人都可以給我一些建議嗎？

謝謝:)

Answer 1

你需要使用一個變量來採取幻燈片編號的計數，如（例如）currentSlide，當btnSlideLeft是cliked幻燈片編號應該增加，並與btnSlideRight應該減少。接下來，您可以將此數字與幻燈片的最大數量（slidesItems.length）和最小（0）進行比較以隱藏或顯示按鈕。我改變了一些代碼來展示基本想法，並給你一個開始。

(function() { 
 
\t var slideList = document.querySelector(".slide-list"); 
 
\t var slideItems = document.querySelectorAll(".slide-list li"); 
 
\t var btnSlideLeft = document.querySelector(".btn-slide-left"); 
 
\t var btnSlideRight = document.querySelector(".btn-slide-right"); 
 
\t var numberOfSlides = slideItems.length; 
 
\t var totalSlideListWidth = slideList.getBoundingClientRect().width; 
 
\t var moveAmount = 25; // for translateX left/right 
 
\t var initial = 0; 
 
    var currentSlide = 0; // New 
 
\t 
 
\t btnSlideLeft.addEventListener("click", function() { 
 
\t \t initial -= moveAmount; 
 
\t \t slideList.style.transform = "translateX(" + initial + "%)"; 
 
    /* New */ 
 
    currentSlide++; 
 
    if(currentSlide == slideItems.length) { 
 
     btnSlideLeft.style.display = "none"; 
 
    } 
 
\t }); 
 

 
\t btnSlideRight.addEventListener("click", function() { 
 
\t \t initial += moveAmount; 
 
\t \t document.querySelector(".slide-list").style.transform = 
 
\t \t \t "translateX(" + initial + "%)"; 
 
     currentSlide--; 
 
\t }); 
 
})();

.page-container { 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t overflow: hidden; 
 
} 
 

 
.js-carousel { 
 
\t overflow: hidden; 
 
\t list-style: none; 
 
    margin: 0 auto; 
 
\t max-width: 1000px; 
 
\t font-size: 0; 
 
\t white-space: nowrap; 
 
} 
 

 
.slide-list li { 
 
\t display: inline-block; 
 
\t height: 150px; 
 
\t width: 25%; 
 
} 
 

 
.image { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t object-fit: cover; 
 
} 
 

 
.slide-nav { 
 
\t padding: 2rem; 
 
\t margin: 1rem auto; 
 
\t max-width: 150px; 
 
} 
 
.btn { 
 
\t cursor: pointer; 
 
\t padding: 1rem 1.5rem; 
 
\t border: 0; 
 
\t margin-left: .25rem; 
 
\t margin-right: .25rem; 
 
}

<div class="page-container"> 
 
\t 
 
\t 
 
\t <div class="js-carousel"> 
 
    <ul class="slide-list"> 
 

 
    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--3.jpg" alt=""></li> 
 
\t  
 
    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii-wallpaper-17.jpg" alt=""></li> 
 

 
\t  
 
\t  <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--6.jpg" alt=""></li> 
 
\t  \t  
 
\t  <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-7.jpg" alt=""></li> 
 
\t  
 
\t  
 
\t  <li><img class="image" src="https://wallscover.com/images/jurassic-world-10.jpg" alt=""></li> \t  
 
\t \t  <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-10.jpg" alt=""></li>  
 
\t 
 
    </ul> 
 

 
<div class="slide-nav"> 
 
\t <button class="btn btn-slide-left">Left</button> 
 
<button class="btn btn-slide-right">Right</button> 
 
</div> 
 
</div> 
 
</div>