根据当前在幻灯片中显示的幻灯片更改按钮的位置

Question

我的网页上有一个幻灯片。在这个幻灯片中，我添加了一个按钮。我希望这个按钮只在幻灯片1上显示。我想要一个不同的按钮在不同的位置和大小显示在幻灯片2。但是，该按钮会在所有幻灯片上显示。如何使按钮只显示在一张幻灯片上?

我已经尝试为我的HTML文档上的每个按钮标签创建单独的id，然后为每个按钮创建单独的样式。但是，无论我在哪个幻灯片上，所有按钮都会一直显示。

例如，第一张幻灯片应该是这样的:在这里输入图像描述第二张幻灯片应该是这样的:输入图片描述

我使用了以下HTML代码:

<div class="swiper">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="images/banner-1.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-2.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-3.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-4.jpeg">
</div>
<div class="swiper-slide">
<img src="images/banner-5.jpeg">
</div>
</div>
</div>
<button id="button">Shop Now</button>
</div>

我使用了下面的CSS代码:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper {
width: 100%;
height: fit-content;
position: absolute;
}
.swiper-slide img {
width: 100%;
}
#button {
position: absolute;
z-index: 1;
top: 350px;
left: 850px;
font-size: 30px;
}

Answer 1

将按钮放在第一个swiper-slide中，将某些id设置为第一个swiper-slide，则CSS将为#yourID {possition:relative;} .button{possition:absolute;}接下来是更多的样式，但这将使您的按钮只固定在第一张幻灯片内。只要确保将第一个幻灯片和按钮的样式设置为ID，就可以避免将来出现一些麻烦。