带swiperJS的条形滑块

Question

现在有谁能在标签中实现滑块吗？

我已经以我自己的方式实现了它，但它开始滞后了。第一个选项卡工作正常，但其他选项卡只显示一张幻灯片，在我调整窗口大小之前不要移动。

以下是我的实现：

溶液

下面是如何实现可点击的选项卡按钮：

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">Slider 1 name</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Slider 2 name</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Slider 3 name</button>
</div>

下面是如何在选项卡中放置滑块：

<div id="London" class="city">
  <p>Slider 1 info</p>
</div>

<div id="Paris" class="city" style="display:none">
  <p>Slider 2 info</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <p>Slider 3 info</p>
</div>

Answer 1

所以最好的选择是使用常规的CSS选项卡。您只需将滑块实现到选项卡中即可。

下面是css选项卡的示例：https://www.w3schools.com/w3css/w3css_tabulators.asp