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

【问题标题】：Changing the position of a button depending on the slide that is currently shown in a slideshow根据幻灯片中当前显示的幻灯片更改按钮的位置
【发布时间】：2023-01-10 23:19:00
【问题描述】：

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

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

例如，第一张幻灯片应如下所示： enter image description here 第二张幻灯片应如下所示： enter image description here

我使用了这个 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;
}

【问题讨论】：

标签： html css image button position

【解决方案1】：

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

【讨论】：