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

Question

我有一个使用 CSS 库 Flickity 的水平滚动导航栏。我修改了旋转木马模板，以便在选择旋转木马单元格时，它会捕捉到导航栏的中心。我在轮播中有 5 个单元格，名为 'slide 1'、'slide 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>

这是我的代码笔： https://codepen.io/loudenw/pen/jGaxzG

Answer 1

Flickity events documentation https://flickity.metafizzy.co/events.html#select

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

我依赖于 flickity 命名空间中的 select 事件并显示具有 id=slide + currentSelectedSlide + 1 的元素（因为脚本从 0 开始获取幻灯片编号，但是您的 ID 从 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() 方法 - 但对我来说它不起作用

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

Displaying Content With Horizontal Navigation (JavaScript)

html

javascript

css

jquery

flickity