CODEWITHSUNDEEP
centerthumbnailsswiper.js
JPC
JPC

Reputation: 55

How to center Swiper Slider thumbs with custom width?

I don't like the thumbs as provided by Swiper Slider. Therefor I want them to have a custom size (e.g. rectangle) and, most important, centered under the main slider.

The API call "centerSlides" does not set them centered, but light to the right.

Some suggestions?

Upvotes: 2

Views: 10113

Answers (1)

Ezra Siton
Ezra Siton

Reputation: 7741

No way to answer (To know why) - your thumbs do not align center.

Look at the example I made (Works fine // no issues): https://codepen.io/ezra_siton/pen/XWrBzMp

In general: most of the times you set the thumbs size by CSS:

.gallery-thumbs .swiper-slide {
        width: 20%;
        height: 100%;
}

In this case change the slidesPerView under JS setting to auto:

  slidesPerView: "auto",

SUM: The size/width/styles of the thumbs not related to Swiper if you set slidePerView: auto (Use any styles you want). And of course, the size of the thumbs also related to the content inside (box-model).

Upvotes: 6

Related Questions