Блог

Главная - Вопросы по программированию - Проблема с автоматическим прокруткой слайдера Swiper по вертикали несколько столбцов в галерее большого пальца

Проблема с автоматическим прокруткой слайдера Swiper по вертикали несколько столбцов в галерее большого пальца

#javascript #gallery #swiper

#javascript #Галерея #swiper.js

Вопрос:

Я пытаюсь создать вертикальную галерею большого пальца, которая управляет основной галереей. Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии на некоторые большие пальцы галерея большого пальца автоматически скользит. Есть ли способ отключить это скольжение и сделать так, чтобы все скольжения происходили только при нажатии кнопок навигации?

Я также столкнулся с проблемой интервала в галерее большого пальца, что видно при просмотре скрипки / фрагмента ниже. Мне нужен разрыв в 6 пикселей. Кроме того, большие пальцы во втором столбце обрезаются. Я не понимаю, потому что я установил ширину 166 пикселей для галереи (2 медиаэлемента размером 80 пикселей 6 пикселей = 166 пикселей).

https://jsfiddle.net/guqsayj3/

 let galleryThumbs = new Swiper('.prod-gallery .gallery-thumbs', {
  spaceBetween: 6,
  slidesPerGroup: 1,
  slidesPerView: 5,
  slidesPerColumn: 2,
  //slideToClickedSlide: true,
  //allowTouchMove: false,
  //freeMode: true,
  //watchSlidesVisibility: true,
  //watchSlidesProgress: true,
  direction: 'vertical',
  noSwiping: false,

  navigation: {
    nextEl: '.gallery-thumbs-wrap .next',
    prevEl: '.gallery-thumbs-wrap .prev',
  },

  //controller: {
  //control: galleryTop,
  //},
});

let galleryTop = new Swiper('.prod-gallery .gallery-main', {
  spaceBetween: 10,
  thumbs: {
    swiper: galleryThumbs
  }
});

//galleryThumbs.controller.control = galleryTop;  
 .prod-gallery {
     display: grid;
     grid-template-columns: 166px minmax(20px, 76px) 300px;
     align-items: center;
}
 .prod-gallery .gallery-thumbs {
     height: 530px;
}
 .prod-gallery .gallery-thumbs .swiper-slide {
     cursor: pointer;
     width: 80px;
     opacity: 0.4;
}
 .prod-gallery .gallery-thumbs .swiper-slide-thumb-active {
     opacity: 1;
}
 .prod-gallery .gallery-thumbs .media {
     width: 80px;
     height: 100px;
     background: grey;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .prod-gallery .gallery-main {
     width: 100%;
     grid-column-start: 3;
}
 .prod-gallery .gallery-main .media {
     width: 300px;
     height: 300px;
     background: grey;
     display: flex;
     align-items: center;
     justify-content: center;
}
 img {
     max-width: 100%;
     height: auto;
}
   
 <script src="https://unpkg.com/swiper@6.3.4/swiper-bundle.js"></script>
<link href="https://unpkg.com/swiper@6.3.4/swiper-bundle.css" rel="stylesheet"/>
<div class="prod-gallery">

  <div class="gallery-thumbs-wrap swiper-no-swiping">
    <!-- Nav -->
    <div class="nav-btn prev">
      <img src="https://via.placeholder.com/30x30">
    </div>
    <div class="nav-btn next">
      <img src="https://via.placeholder.com/30x30">
    </div>

    <!-- Slider -->
    <div class="gallery-thumbs swiper-container">
      <div class="swiper-wrapper" style="height: 742px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
        <div class="swiper-slide">
          <div class="media">1</div>
        </div>
        <div class="swiper-slide">
          <div class="media">2</div>
        </div>
        <div class="swiper-slide">
          <div class="media">3</div>
        </div>
        <div class="swiper-slide">
          <div class="media">4</div>
        </div>
        <div class="swiper-slide">
          <div class="media">5</div>
        </div>
        <div class="swiper-slide">
          <div class="media">6</div>
        </div>
        <div class="swiper-slide">
          <div class="media">7</div>
        </div>
        <div class="swiper-slide">
          <div class="media">8</div>
        </div>
        <div class="swiper-slide">
          <div class="media">9</div>
        </div>
        <div class="swiper-slide">
          <div class="media">10</div>
        </div>
        <div class="swiper-slide">
          <div class="media">11</div>
        </div>
        <div class="swiper-slide">
          <div class="media">12</div>
        </div>
        <div class="swiper-slide">
          <div class="media">13</div>
        </div>
      </div>
    </div>
  </div>

  <div class="gallery-main swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="media">1</div>
      </div>
      <div class="swiper-slide">
        <div class="media">2</div>
      </div>
      <div class="swiper-slide">
        <div class="media">3</div>
      </div>
      <div class="swiper-slide">
        <div class="media">4</div>
      </div>
      <div class="swiper-slide">
        <div class="media">5</div>
      </div>
      <div class="swiper-slide">
        <div class="media">6</div>
      </div>
      <div class="swiper-slide">
        <div class="media">7</div>
      </div>
      <div class="swiper-slide">
        <div class="media">8</div>
      </div>
      <div class="swiper-slide">
        <div class="media">9</div>
      </div>
      <div class="swiper-slide">
        <div class="media">10</div>
      </div>
      <div class="swiper-slide">
        <div class="media">11</div>
      </div>
      <div class="swiper-slide">
        <div class="media">12</div>
      </div>
      <div class="swiper-slide">
        <div class="media">13</div>
      </div>
    </div>
  </div>

</div>

Ответ №1:

Добавьте slidesPerColumnFill: «строка», и отступы между слайдами будут правильными

Ответ №2:

Здесь есть два варианта:

Столбцы следуют вертикальному направлению

ДЕМОНСТРАЦИЯ

 1..4
2..5
3..6

Необходимо добавить slidesPerColumnFill: 'row'

Столбцы следуют горизонтальному направлению

ДЕМОНСТРАЦИЯ

 1..2
3..4
5..6

Необходимо установить свойство flex-direction: row; для .swiper-container-multirow-column > .swiper-wrapper 

 .swiper-container-multirow-column > .swiper-wrapper{
  flex-direction: row;
}