Swiper Slider -活动索引

Question

我正在尝试动画滑块的幻灯片编号(用Swiper制作)，但它不能像预期的那样工作，我很难找到我遗漏的东西。底部的幻灯片编号应该会更改，但当我单击它时，什么也不会发生。

以下是代码的JSfiddle

这是html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

<!-- Section Testimonies -->
<div class="section testimonial" id="testimonial">
  <div class="swiper-container faded-text">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p class="p-large">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </p>
        <p><strong>Johnny Doe</strong></p>
        <p>Lorem ipsum dolor, Company name</p>
      </div>
      <div class="swiper-slide">
        <p class="p-large">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </p>
        <p><strong>Johnny Doe</strong></p>
        <p>Lorem ipsum dolor, Company name</p>
      </div>
      <div class="swiper-slide">
        <p class="p-large">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </p>
        <p><strong>Johnny Doe</strong></p>
        <p>Lorem ipsum dolor, Company name</p>
      </div>
      <div class="swiper-slide">
        <p class="p-large">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </p>
        <p><strong>Johnny Doe</strong></p>
        <p>Lorem ipsum dolor, Company name</p>
      </div>
      <div class="swiper-slide"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <div class="swiper-navigation">
      <div class="swiper-button-prev"></div>
      <!-- <div class="swiper-counter"><span class="swiper-numbers__current">01</span> / 05</div> -->
      <div class="swiper-counter"></div>
      <div class="swiper-button-next"></div>
    </div>

  </div>
</div>
<!-- / Section Testimonies -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

css

#testimonial {

  .swiper-container {
    width: 100%;
    height: 100%;

    .swiper-wrapper {

      .swiper-slide {
        text-align: left;
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        max-width: 800px;

        .p-large {
          margin-bottom: 120px;
        }
      }

      .swiper-slide-next {
        opacity: 0.3;
      }
    }

    .swiper-navigation {
      margin-top: 200px;
      position: relative;
      max-width: 20vw;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .swiper-counter,
      .swiper-counter span {
        position: relative;
        z-index: 99999;
      }

      .swiper-counter .next,
      .swiper-counter .count {
        position: relative;
      }

      .swiper-counter .next {
        transform: translateY(-12px);
        right: 10px;
      }

      .swiper-button-prev {
        position: relative;
        top: 0;
        margin-top: 0;
        left: 0;
        background-size: 20px 20px;
      }

      .swiper-counter {
        margin: 0 60px;
      }

      .swiper-button-next {
        position: relative;
        top: 0;
        margin-top: 0;
        right: 0;
        background-size: 20px 20px;
      }
    }
  }
}

最后是javascript

const counter = $('.swiper-counter');
let currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);

function photosChange(swiper) {
  const index = swiper.activeIndex + 1;

  const $current = $('.photo-slide').eq(index);

  const dur = 0.8;

  const prevCount = $('.count');
  currentCount = $(`<span class="count next">${index}<span/>`);
  currentCount.appendTo(counter);
  TweenMax.to(prevCount, dur, {
    y: -12,
    opacity: 0,
    onCompleteParams: [prevCount],

    onComplete(prevCount) {
      prevCount.remove();
    },
    ease: Power4.easeOut,
  });
  TweenMax.fromTo(
    currentCount,
    dur,
    {
      y: 12,
      opacity: 0,
    },
    {
      y: 0,
      opacity: 1,
      ease: Power4.easeOut,
    },
  );
}

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 200,
  loop: false,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  onSlideChangeStart: photosChange,
});

Answer 1

看起来onSlideChangeStart: photosChange方法不起作用。

您可以将此代码添加到代码的末尾(应该在swiper初始化之后)：

swiper.on('slideChange', function () {
  $('.count').text(this.activeIndex + 1);
});

您也可以将photosChange(swiper)的功能传递给此函数。

希望能有所帮助。

Answer 2

如果你想得到一个真实的索引，那么使用下面的代码。

swiper.on('transitionEnd', function () {
   $('.count').text(swiper.realIndex + 1);
});