单击以更改幻灯片时 Flickity 选择功能添加 is-selected 类的问题

问题描述

我正在使用 Flickity 来显示历史时间线。以下问题阻止我在初次点击后将 .is-selected 类添加到 <ul> 中的按钮链接。

flkty.on( "select",function() {
  const prevIoUsSelectedItem = listItems.querySelector(".is-selected");

  // Not sure if the flkty.selectedindex functionality is working
  const selectedItem = listItems.children[ flkty.selectedindex ];

  // Class is being removed initially,but error occurs after initial click
  prevIoUsSelectedItem.classList.remove("is-selected");

  // .is-selected class is not being added after initial click
  selectedItem.classList.add("is-selected");
  });

我使用这个例子作为我的轮播时间线的基础：Custom UI with Vanilla JS

您还会注意到，单击列表中的第一个按钮链接时不会执行任何操作。未显示任何特定错误，因此我不确定它是否与其他问题或其他问题有关。

简化示例

const utils = window.fizzyUIUtils;

const flkty = new Flickity(".carousel__content",{
  cellAlign: "left",contain: true,prevNextButtons: false,pageDots: false
});

const listItems = document.querySelector(".timeline__nav");
const listItemsButtons = utils.makeArray(listItems.children);

flkty.on("select",function() {
  const prevIoUsSelectedItem = listItems.querySelector(".is-selected");
  const selectedItem = listItems.children[flkty.selectedindex];
  prevIoUsSelectedItem.classList.remove("is-selected");
  selectedItem.classList.add("is-selected");
});

listItems.addEventListener("click",function(event) {
  event.preventDefault();
  // Filter for clicks
  if (!matchesSelector(event.target,".js-btn--year")) {
    return;
  }
  const selector = event.target.getAttribute("data-group");
  flkty.selectCell(selector);
});

// PrevIoUs button
const prevIoUsBtn = document.querySelector(".js-btn--prevIoUs");
prevIoUsBtn.addEventListener("click",function() {
  flkty.prevIoUs();
});

// Next button
const nextBtn = document.querySelector(".js-btn--next");
nextBtn.addEventListener("click",function() {
  flkty.next();
});

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,section {
  display: block;
}

body {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.carousel {
  margin: 40px;
}

.carousel__timeline {
  margin-bottom: 90px;
}

.timeline__nav {
  display: flex;
}

.timeline__item {
  width: 170px;
  height: 3px;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #c2c2c2;
}

.timeline__item .button--year {
  margin: 0;
  padding: 0;
  position: absolute;
  top: -20px;
  background: transparent;
  border: none;
  transform: translateY(-100%);
  font-weight: 700;
  font-size: 1.1875rem;
  cursor: pointer;
  color: #A4475B;
}

.timeline__item .button--year::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 44px;
  left: 0;
  background-color: #A4475B;
  border-radius: 50%;
}

.carousel__cell {
  width: 100%;
  height: 300px;
  margin-right: 0.625rem;
}

.carousel__nav {
  position: relative;
}

.carousel__nav .button {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: #c2c2c2;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
}

.carousel__nav .button--next {
  right: 0;
}

<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<div class="carousel">
  <div class="carousel__timeline">
    <ul class="timeline__nav">
      <li class="timeline__item is-selected" data-year="1984">
        <a href="#" id="1984" class="button button--year js-btn--year" data-group=".groupone"><span>1984 to 1988</span></a>
      </li>
      <li class="timeline__item" data-year="1989">
        <a href="#" id="1989" class="button button--year js-btn--year" data-group=".grouptwo">1989 to 1992</a>
      </li>
      <li class="timeline__item" data-year="1993">
        <a href="#" id="1993" class="button button--year js-btn--year" data-group=".groupthree">1993 to 1999</a>
      </li>
      <li class="timeline__item" data-year="2000">
        <a href="#" id="2000" class="button button--year js-btn--year" data-group=".groupfour">2000 to 2002</a>
      </li>
      <li class="timeline__item" data-year="2003">
        <a href="#" id="2003" class="button button--year js-btn--year" data-group=".groupfive">2003 to 2005</a>
      </li>
      <li class="timeline__item" data-year="2006">
        <a href="#" id="2006" class="button button--year js-btn--year" data-group=".groupsix">2006 to 2012</a>
      </li>
      <li class="timeline__item" data-year="2013">
        <a href="#" id="2013" class="button button--year js-btn--year" data-group=".groupseven">2013 to 2020</a>
      </li>
    </ul>
  </div>
  <div class="carousel__content">
    <article class="carousel__cell groupone">
      Text content - group one
    </article>
    <article class="carousel__cell groupone">
      Text content - group one
    </article>
    <article class="carousel__cell groupone">
      Text content - group one
    </article>
    <article class="carousel__cell grouptwo">
      Text content - group two
    </article>
    <article class="carousel__cell grouptwo">
      Text content - group two
    </article>
    <article class="carousel__cell grouptwo">
      Text content - group two
    </article>
    <article class="carousel__cell grouptwo">
      Text content - group two
    </article>
    <article class="carousel__cell groupthree">
      Text content - group three
    </article>
    <article class="carousel__cell groupthree">
      Text content - group three
    </article>
    <article class="carousel__cell groupthree">
      Text content - group three
    </article>
    <article class="carousel__cell groupfour">
      Text content - group four
    </article>
    <article class="carousel__cell groupfour">
      Text content - group four
    </article>
    <article class="carousel__cell groupfour">
      Text content - group four
    </article>
    <article class="carousel__cell groupfive">
      Text content - group five
    </article>
    <article class="carousel__cell groupfive">
      Text content - group five
    </article>
    <article class="carousel__cell groupfive">
      Text content - group five
    </article>
    <article class="carousel__cell groupsix">
      Text content - group six
    </article>
    <article class="carousel__cell groupsix">
      Text content - group six
    </article>
    <article class="carousel__cell groupsix">
      Text content - group six
    </article>
  </div>
  <div class="carousel__nav">
    <button class="button button--prevIoUs js-btn--prevIoUs">
        <svg width="18" height="18"><path d="M10.347 1.175L9.455.283a.96.96 0 0 0-1.362 0L.283 8.09a.96.96 0 0 0 0 1.362l7.81 7.81a.96.96 0 0 0 1.362 0l.892-.892a.965.965 0 0 0-.016-1.378L5.49 10.379h11.546c.534 0 .964-.43.964-.964V8.129a.962.962 0 0 0-.964-.964H5.49l4.84-4.612a.958.958 0 0 0 .017-1.378z" fill="#F7F7F7"/></svg>
    </button>
    <button class="button button--next js-btn--next">
        <svg width="18" height="18"><path d="M7.653 1.175l.892-.892a.96.96 0 0 1 1.362 0l7.81 7.806a.96.96 0 0 1 0 1.362l-7.81 7.81a.96.96 0 0 1-1.362 0l-.892-.892a.965.965 0 0 1 .016-1.378l4.841-4.612H.964A.962.962 0 0 1 0 9.415V8.129c0-.534.43-.964.964-.964H12.51L7.67 2.553a.958.958 0 0 1-.017-1.378z" fill="#F7F7F7"/></svg>
    </button>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）