CODEWITHSUNDEEP
javascriptcssswiper.js
tsvetko.krastev
tsvetko.krastev

Reputation: 77

Swiper with custom widths

I'm trying to create a specific slider using Swiper (https://swiperjs.com/). For example, I want my slide to have width of 300px and when it becomes active to have width of 700px.. I'm setting the widths with CSS and for slidesPerView I'm using 'auto'. Is there a way to achieve this? I'm trying with on slideChange event to run the following swiper functions without any luck - swiper.updateProgress(), swiper.updateSize(), swiper.update() and swiper.updateSlides().. Any other suggestions I could try?

Upvotes: 0

Views: 2442

Answers (1)

Señor Lancho
Señor Lancho

Reputation: 39

When a slide is active, it recieves a new class named "swiper-slide-active". You can change the CSS of this class. Example:

.swiper-slide-active {
    width: 700px !important;
}

If you want to set the width of your slider, just alter the css of the marked container (see picture below) enter image description here

I hope this was helpful, if I missunderstood your question, feel free to ask again :).

Upvotes: 0

Related Questions