我有一个使用 CSS 库 Flickity 的水平滚动导航栏。我修改了轮播模板,以便在选择轮播单元格时,它会捕捉到导航栏的中心。我在轮播中有 5 个单元格,名为“幻灯片 1”、“幻灯片 2”,依此类推。我试图弄清楚如何仅在选择轮播单元格时才显示相应的内容。否则我需要隐藏内容。
<nav>
<div class="carousel" data-flickity>
<div class="carousel-cell">
<a href="#slide1">
slide 1
</a>
</div>
<div class="carousel-cell">
<a href="#slide2">
slide 2
</a>
</div>
<div class="carousel-cell">
<a href="#slide3">
slide 3
</a>
</div>
<div class="carousel-cell">
<a href="#slide4">
slide 4
</a>
</div>
<div class="carousel-cell">
<a href="#slide5">
slide 5
</a>
</div>
</div>
</nav>
<!--Content-->
<main>
<div class="container">
<div id="slide1">
SLIDE 1
</div>
<div id="slide2">
SLIDE 2
</div>
<div id="slide3">
SLIDE 3
</div>
<div id="slide4">
SLIDE 4
</div>
<div id="slide5">
SLIDE 5
</div>
</div>
</main>
这是我的 Codepen: https ://codepen.io/loudenw/pen/jGaxzG