CODEWITHSUNDEEP
sliderswiper.js
demkovych
demkovych

Reputation: 8867

Swiper slider empty spaces

I have some problem with Swiper slider. When i scroll to the end of slider, some empty spaces is visible.

http://take.ms/siqXj

swiper = new Swiper(profile_images, {
    slidesPerView: 4,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    observer: true
});

https://jsfiddle.net/x2zu5ett/1/

UPDATE Solution: set 'slidesPerView' attribute to 'auto'

Upvotes: 6

Views: 19871

Answers (4)

Evgeniia K
Evgeniia K

Reputation: 11

In my case, the space was created because of the margin-right in css for swiper-slides and spaceBetween in Swiper options at the same time. After removing margin-right in styles (or spaceBetween from the options - this was helping too) the space has gone.

Upvotes: 0

Ayoub EL ABOUSSI
Ayoub EL ABOUSSI

Reputation: 704

Still having such issues ? try setting

width: auto;

on swiper

Upvotes: -1

jgsneves
jgsneves

Reputation: 91

https://swiperjs.com/swiper-api#param-centeredSlidesBounds

check centeredSlidesBounds param. It will remove black spaces in begging and ending of slides-wrapper.

Upvotes: 0

tiago alves
tiago alves

Reputation: 27

Do you still need help?
Try to add this: loopFillGroupWithBlank: false,

Check mine:

var swiper2 = new Swiper('.swiper-container2', {
    slidesPerView: 'auto',
    centeredSlides: true,
    spaceBetween: 150,
    speed: 1500,
    loop: true,
    simulateTouch : true,
    loopFillGroupWithBlank: false,
    grabCursor: true,
    //touchStartPreventDefault: false,
});

Upvotes: 0

Related Questions