Swiper Slider - Thumbs Gallery With Slidetoclickedslide Do Not Work Properly

Swiper slider - thumbs gallery with slideToClickedSlide do not work properly

With plain JavaScript:

https://jsfiddle.net/sa7qwz25/171/

var galleryTop = new Swiper('.gallery-top', {
  ...
   on: {
    slideChange: function () {
      let activeIndex = this.activeIndex + 1;

      let activeSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`);
      let nextSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`);
      let prevSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`);

      if (nextSlide && !nextSlide.classList.contains('swiper-slide-visible')) {
          this.thumbs.swiper.slideNext()    
      } else if (prevSlide && !prevSlide.classList.contains('swiper-slide-visible')) {
          this.thumbs.swiper.slidePrev()    
      }    
    }
  }
});

Swiper, cannot make gallery thumbs move how to fix?

Easy bro_)) add this line to your code and will make it move! galleryTop.controller.control = galleryThumbs;

Swiper slider not working as expected with loop: true and centeredSlides: false

You can Do Something Like this

HTML

 <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
        </div>
    </div>

CSS

html, body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  height: 80%;
  width: 70%;
  margin: 0;
  margin-left: auto;
}

.gallery-thumbs {
  //height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs.swiper-container {
  padding: 10px;
  margin: 0px;
}

.gallery-thumbs .swiper-slide {
  height: 30%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
  border: 2px solid #ffa303;
}
.gallery-top{
    float:right;
    width:80%;
}


.gallery-thumbs{
    float:left;
    width:20%;
    height:80%;
}

JS

var galleryTop = new Swiper(".gallery-top", {
  nextButton: ".swiper-button-next",
  prevButton: ".swiper-button-prev",
  spaceBetween: 10,
  loop:true,
  loopedSlides: 50
});
var galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 10,
  slidesPerView: "auto",
  touchRatio: 0.2,
  loop:true,
  slideToClickedSlide: true,
  loopedSlides: 50,
  direction:'vertical'
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;

Codepen Link For Reference

Give this a try.

Swiper JS - Enter button doesn't do anything on the thumbnail for accessibility

This is a bug/missing feature in Swiper (https://github.com/nolimits4web/swiper/issues/4324), but I found a workaround.

Basically, add data-slide-index to all thumbs and add a keydown listener to the thumbnail elements:

galleryThumbs.$el.on("keydown", (e) => {
  if (e.keyCode !== 13 && e.keyCode !== 32) return;

  var slideIndex = e.target.dataset.slideIndex;

  if (!slideIndex) return;

  galleryThumbs.slideTo(slideIndex);
  galleryTop.slideTo(slideIndex);
});

Here's the full code with a demo: https://codesandbox.io/s/swiper-thumbs-gallery-forked-2d1up?file=/index.html.

---

Related Topics