I am trying to create a vertical thumb gallery that controls a main gallery. The issue I'm having is that when some of the thumbs are clicked, the thumb gallery automatically slides. Is there a way to disable that sliding, and make it so that all sliding only occurs when the nav buttons are clicked?
I'm also running into a spacing issue in the thumb gallery, which is evident when viewing the fiddle/snippet below. I need a 6px gap. Also, the thumbs in the second column are being cut off. I don't understand, because I set a width of 166px for the gallery (2 80px media items + 6px gap = 166px).
/
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="/[email protected]/swiper-bundle.js"></script>
<link href="/[email protected]/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="">
</div>
<div class="nav-btn next">
<img src="">
</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>I am trying to create a vertical thumb gallery that controls a main gallery. The issue I'm having is that when some of the thumbs are clicked, the thumb gallery automatically slides. Is there a way to disable that sliding, and make it so that all sliding only occurs when the nav buttons are clicked?
I'm also running into a spacing issue in the thumb gallery, which is evident when viewing the fiddle/snippet below. I need a 6px gap. Also, the thumbs in the second column are being cut off. I don't understand, because I set a width of 166px for the gallery (2 80px media items + 6px gap = 166px).
https://jsfiddle/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./[email protected]/swiper-bundle.js"></script>
<link href="https://unpkg./[email protected]/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./30x30">
</div>
<div class="nav-btn next">
<img src="https://via.placeholder./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>2 Answers
Reset to default 2There are two options here:
Columns follow a vertical direction
DEMO
1..4
2..5
3..6
Need to add slidesPerColumnFill: 'row'
Columns follow a horizontal direction
DEMO
1..2
3..4
5..6
Need to set a property flex-direction: row; for .swiper-container-multirow-column > .swiper-wrapper
.swiper-container-multirow-column > .swiper-wrapper{
flex-direction: row;
}
Add slidesPerColumnFill: 'row' and indents between slides will be correct