CODEWITHSUNDEEP
slidercarouselswiper.jsreact-swiper
Chrissi
Chrissi

Reputation: 25

Swiper slider with slidesPerView="auto" skips my last items

I wanted to make a slider using Swiper, that shows 3 cards and align to my container. On the initial state the first chard schuld align on the left of my container and have one "empty" card to the left and one visible card to the right (like in the image below). after swiping the "empty" card schuld disappear and the second card from before should be left aligned to the container with a new card to the right and the old first card to the left.

Currently i have all my cards next to each other and i can swipe through them. But my last cards (depending on the window size how many cards) wont align to the left of the container and most of the time my last two items Count as one Item. How can i get them to align them to the left of my container and be a separate item?

Here is my React code:

export const Carousel: React.FC<CarouselProps> = ({ items }) => {
  return (
    <Swiper
      slidesPerView={'auto'}
      spaceBetween={16}
      slidesOffsetBefore={32}
      wrapperClass="container"
      rewind={true}
      pagination={true}
      modules={[Pagination]}
    >
      {items.map((itm, i) => {
          return (
            <SwiperSlide key={i} className="!w-3/5 flex flex-row bg-white">
              <div className="p-4 flex flex-col gap-6">
                <div>
                  <h3 className="text-h3">
                    {itm.title} + {i}
                  </h3>
                  <p className="text-regular mb-4">{itm.desc}</p>
                </div>
              </div>
            </SwiperSlide>
          )
        })}
    </Swiper>
  )
}

Here a sketch how I imagine my slider initial state:

Unbenannt

Here a Screenshot from my "last" card/cards taht coutn as one and wont align left (The container is indicated by the Lorem text above): image

Upvotes: 0

Views: 42

Answers (0)

Related Questions