search

shoha-kh / products-gallery-carousel-with-zoom

7 stars 8 forks source link

How to show thumbnail images to the next line if there are many images #3

Closed faisal95bd closed 2 years ago

faisal95bd commented 2 years ago

Hi,

for example, I have 7 images. Now in the first line, I want to show 4 thumbnail images, and the rest 3, I want to show them in the next line? ScreenShot How can I do that?

faisal95bd commented 2 years ago

No updates so far... 🙄

shoha-kh commented 2 years ago

The easiest option is to use css. Remove the position: absolute; from the images and remove the fixed height.

.gallery-thumbs {
    height: auto !important;
}

.gallery-thumbs > .swiper-wrapper {
    transform: none !important;
    flex-wrap: wrap;
}

.product__carousel .gallery-thumbs .swiper-slide img {
    position: relative;
    max-width: 100%;
    max-height: 170px;
}