html - Infinite looping Swiper.js "thumbnail" navigation? - Stack Overflow

admin管理员组

文章数量:1356783

Using modified version of swiper.js "thumbs" gallery and help from this codepen, I'm trying to get an infinitely looping menu/slide combination:

Here's what I have so far

// Assign some jquery elements we'll need
var $swiper = $(".swiper");
var $bottomSlide = null; // Slide whose content gets 'extracted' and placed
// into a fixed position for animation purposes
var $bottomSlideContent = null; // Slide content that gets passed between the
// panning slide stack and the position 'behind'
// the stack, needed for correct animation style
var nav = new Swiper(".swiper", {
  spaceBetween: 20,
  slidesPerView: 3,
  centeredSlides: true,
  roundLengths: true,
  loop: true,
  slideToClickedSlide: true,
  loopAdditionalSlides: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    click() {
      nav.slideTo(this.clickedIndex);
      if (nav.clickedIndex > nav.activeIndex) {
        nav.slideNext();
      } else {
        nav.slidePrev();
      }
    },
  },
});
var swiper2 = new Swiper(".swiper2", {
  loop: true,
  spaceBetween: 10,
  slidesPerView: 1,
  slidesPerGroup: 1,
  centeredSlides: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: nav,
  },
});

.wrapper {
  overflow: hidden;
}

.frames {
  position: relative;
  width: 90vw;
}

.frames>.swiper-slide__content {
  position: absolute;
  top: 0;
}

.frames .content {
  text-align: center;
  max-width: 33%;
  cursor: pointer;
}

.frames .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms linear;
  transform: scale(0.8);
  padding: 20px 0;
}

.frames .swiper-slide.swiper-slide-active {
  transform: scale(1);
  background: green;
  color: #ffffff;
}

.display .content {
  width: 100%;
  height: 200px;
  text-align: center;
}

.display .content.con1 {
  background-color: #ffefee;
}

.display .content.con2 {
  background-color: #cccccc;
}

.display .content.con3 {
  background-color: #555;
}

.display .content.con4 {
  background-color: #999;
}

.display .content .con5 {
  background: #f0f0f0;
}

<script src=".7.1/jquery.min.js"></script>
<script src="@11/swiper-bundle.min.js"></script>

<div class="wrapper">
  <div class="framesContainer">
    <div class="navigation">
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div class="swiper frames sitewidth">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="content">
            Frame 1
          </div>
        </div>
        <div class="swiper-slide">
          <div class="content">
            Frame 2
          </div>
        </div>
        <div class="swiper-slide">
          <div class="content">
            Frame 3
          </div>
        </div>
        <div class="swiper-slide">
          <div class="content">
            Frame 4
          </div>
        </div>
        <div class="swiper-slide">
          <div class="content">
            Frame 5
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper2 display">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="content con1">
          content 1
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content con2">
          content 2
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content con3">
          content 3
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content con4">
          content 4
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content con5">
          content 5
        </div>
      </div>
    </div>
  </div>
</div>

本文标签： htmlInfinite looping Swiperjs quotthumbnailquot navigationStack Overflow