用水平导航显示内容(JavaScript)

Question

我使用CSS库闪烁具有水平滚动导航栏。我修改了轮播模板，以便选择旋转木马的电池时，它会捕捉到导航栏的中心。我的旋转木马中有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

Answer 1

Flickity事件文档https://flickity.metafizzy.co/events.html#select

jquery event.namespace https://api.jquery.com/event.namespace/

我依赖于flickity名称空间中的select事件，并显示具有ID = slide currentSelectedSlide + 1的元素（因为脚本从0开始获取幻灯片，但您的IDS从1开始）

）

$(document).ready(function() {
  $('.carousel').on('select.flickity', function() {
    var selector = '#slide' + ($('.carousel-cell.is-selected').index()+ 1);
    $('.container').find('div').hide();
    $(selector).fadeIn();
  })
});

main .container {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  background-color: red;
  text-align: center;
}
nav {
  width: 100%;
  height: 30px;
  background-color: #ffffff;
  text-align: center;
}
.hidden {
  display: none;
}
.carousel {
  background-color: #fff;
  width: 60%;
  margin: 0 20% 0 20%;
}
.carousel-cell {
  width: 50%;
  height: 30px;
  margin-right: 10px;
  background: #fff;
  border-radius: 5px;
  counter-increment: gallery-cell;
}
* {
  box-sizing: border-box;
}
.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  background: transparent;
}
.flickity-prev-next-button:hover {
  background: transparent;
}

/* arrow color */
.flickity-prev-next-button .arrow {
  fill: #000;
}
.flickity-prev-next-button.no-svg {
  color: #000;
}
.carousel-cell {
  opacity: 0;
  transition: opacity .4s;
}
.carousel-cell.is-selected {
  opacity: 1;
}
.container>div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<nav>
  <div class="carousel" data-flickity='{"initialIndex": 4, "pageDots": false } '>
    <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" class="slide-related-content">
      SLIDE 1 RELATED CONTENT
    </div>
    <div id="slide2" class="slide-related-content">
      SLIDE 2 RELATED CONTENT
    </div>
    <div id="slide3" class="slide-related-content">
      SLIDE 3 RELATED CONTENT
    </div>
    <div id="slide4" class="slide-related-content">
      SLIDE 4 RELATED CONTENT
    </div>
    <div id="slide5" class="slide-related-content">
      SLIDE 5 RELATED CONTENT
    </div>
  </div>
</main>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.js"></script>

根据文档，应使用 $flickity.data('flickity').selectedIndex而不是jquery index()方法 - 但对我而言，它行不通