帶有箭頭的Javascript滑塊

Question

我想制作一個帶有箭頭的滑塊，我嘗試了幾種方法，但是我還是失敗了，所以我真的不知道從哪里開始是我的html，

    <div class="previous-butn"></div>
<div class="slider">
<a href="">
<img src="assets/media/images/colormood-slide.jpg" alt="">
</a>
<div class="next-butn"></div>

這是我的js

const currentSlide = document.querySelector('.slider img');
const projectSlide = [
'assets/media/images/colormood-slide.jpg',
'assets/media/images/cancellato-slide.jpg',
'assets/media/images/grazia-slide.jpg',
'assets/media/images/maxnextdoor-slide.jpg',
'assets/media/images/sasha-slide.jpg',
'assets/media/images/windinthecity-slide.jpg',
'assets/media/images/gullsnitt-slide.jpg'
];
let slidesCounter = 1;

Answer 1

首先，為滑塊創建HTML和CSS。 使用一個包含其他所有內容的單個div。 在您的滑塊情況下，容器div應該包含兩個主要的div，一個用於滑塊圖像，另一個包含控制按鈕，即箭頭。

在滑塊圖像的容器中，放置多個圖像。

僅在第一張圖片上使用CSS這樣的類，例如“ active”。 現在編寫CSS以隱藏除具有“ active”類的圖像以外的所有圖像。 還可以使用CSS將導航器箭頭放置在想要的位置。

現在，在瀏覽器中打開頁面，看看是否可以。 當可以的時候前進到JS

將點擊事件添加到箭頭按鈕（目前不考慮自動播放）

以下是NEXT按鈕的邏輯

1. CurrentActiveImageIndex =在活動類的情況下獲取圖像的索引
2. TotalNumberOfImages =計算滑塊中的圖像總數
3. NextActiveImageIndex = CurrentActiveImageIndex +1
4. 如果NextActiveImageIndex == TotalNumberOfImages
5. 然后NextActiveImageIndex = 0
6. 從所有圖像中刪除活動班級
7. 將活動類添加到NextActiveImageIndex上的圖像

PREVIOUS按鈕的邏輯正好相反，以下僅是更改的行

3. NextActiveImageIndex = CurrentActiveImageIndex-1
4. 如果NextActiveImageIndex <0
5. 然后，NextActiveImageIndex = TotalNumberOfImages-1