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 和 class，例如 'active'。现在写入 CSS 以隐藏除具有 'active' class 的图像之外的所有图像。还可以使用 CSS 将导航器箭头放置在您希望的位置。

现在在浏览器中打开页面，看看是否可以。没问题的时候转向 JS

为您的箭头按钮添加点击事件（此时不考虑自动播放）

下一个按钮的逻辑如下

CurrentActiveImageIndex = 获取 class 活动图像的索引
TotalNumberOfImages = 计算滑块中的图像总数
NextActiveImageIndex = CurrentActiveImageIndex + 1
IF NextActiveImageIndex == TotalNumberOfImages
然后 NextActiveImageIndex = 0
从所有图像中删除 class 活动
将 class 活动添加到位于 NextActiveImageIndex

PREVIOUS 按钮的逻辑正好相反，以下是更改的行

NextActiveImageIndex = CurrentActiveImageIndex - 1
如果 NextActiveImageIndex < 0
THEN NextActiveImageIndex = TotalNumberOfImages - 1

Javascript 带箭头的滑块

Javascript slider with arrows

html

javascript

arrows

slider