Swiper is broken when the data length is less than the slidesPerView.

[olcaneristi]

Hey there!

There is a strange issue we encountered in the carousel we created using Swiper. (React.js)

Carousel breaks down when data length is less than slidesPerView.

Example: When we've data with 4 items, "slidesPerView: 5" on 1024 breakpoint, the Carousel was broken on image/item width and Swiper can't calculate.

• When we shrink/expand the window, DevTools shows the width as 1px.
• Image width is correct when data length is greater than slidesPerView at 576. (Data length: 4, slidesPerView: 3)

** Is there anyone who can help us with this problem? We want to know what we did wrong.

example.mp4

Our breakpoints are like this:

const swiperParams: SwiperParams = {
  modules: [Navigation, Pagination, Scrollbar, A11y, Lazy],
  spaceBetween: 10,
  // resistance: false,
  navigation: {
    prevEl: '.gallery-carousel__slider-prev',
    nextEl: '.gallery-carousel__slider-next',
    disabledClass: 'gallery-carousel__slider--disabled',
  },
  breakpoints: {
    450: {
      slidesPerView: 2,
      slidesPerGroup: 2,
    },
    576: {
      slidesPerView: 3,
      slidesPerGroup: 3,
    },
    768: {
      slidesPerView: 5,
      slidesPerGroup: 5,
    },
    1024: {
      slidesPerView: 6,
      slidesPerGroup: 6,
    },
  },
  wrapperTag: 'ul',
  lazy: true,
};

Our Swiper layout is like this:

<Swiper {...swiperParams} onPaginationUpdate={onPaginationUpdate}>
            {media.map(
              (reviewItem, index) =>
                reviewItem.uri && (
                  <SwiperSlide key={index} tag="li">
                    {({ isActive }) => (
                      <div className="gallery-carousel__slider__review-item" tabIndex={isActive ? 0 : -1}>
                        <a
                          href={'#'}
                          className="gallery-carousel__slider__review-item__link"
                          aria-labelledby={reviewItem.headline}
                        >
                          <img
                            src={reviewItem.uri.replace(/h_\d+/, 'h_175')}
                            alt=""
                            className="gallery-carousel__slider__review-item__image"
                          />
                        </a>
                      </div>
                    )}
                  </SwiperSlide>
                ),
            )}
</Swiper>

[olcaneristi]

ah, that's my fault. Swiper is broken cause of the flexbox in the main container.

fixed.

[ivanjeremic]

I use React.js too but I don't know where the classes you marked come from, it seems to me this has nothing to do with the library all I use is the Swiper & SwiperSlide components from swiper/react. And I also checked my parent and I have no parent which could be a flexbox.

[olcaneristi]

yeah, these classes I marked are my custom layout elements. that was my problem. honestly, I don't understand what's causing your problem. I hope you can find a solution.

[ivanjeremic]

Yeah I hope so beauce flexbox isn't really my issue because I have no flexbox but still the problem with when length of my map is greater than or equal to sliderPerView it breaks.

[NeoHuncho]

did you find the solution? I'm having the same issue

[Hasan-Mir]

@olcaneristi Thank you sooooo much!