CODEWITHSUNDEEP
javascriptcssreactjsslidercarousel
Kyowan Kim
Kyowan Kim

Reputation: 409

Display issues with multiple React Carousel libraries

I am currently trying to implement some Carousel libraries into my react app but I am coming across an issue with all the ones I've tried. The Carousels would display the items on the first slide, but then it wouldn't display any other items on the other slides, even if they exist within the carousel and I am able to switch to the next slide.

I've currently tried SwiperJS, Embla-Carousel and React-Responsive-Carousel.

In the example below I will be using SwiperJS and have 5 items in the Carousel.

Slide 1 - Displaying 3 items on each slide

Slide 2 - Displaying 3 items on each slide

You can see that I am able to slide through the carousel, but it cuts off all the other items that was not displayed on the first slide. I know that the 5 items exist by displaying all 5 on one slide.

Displaying all 5 items on one slide

I've recreated this issue with the other 2 carousels and have been stuck on this for 3 days. Any help would be greatly appreciated.

JSX code

import "./extraspace.scss"
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module
export default function ExtraSpace() {

    return (
      <div className="page">
        <Swiper
          className="swiper-container"
          spaceBetween={50}
          slidesPerView={3}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
        >
          <SwiperSlide className="swiper-slide">Slide 1</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 2</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 3</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 4</SwiperSlide>
          <SwiperSlide className="swiper-slide">Slide 5</SwiperSlide>
        </Swiper>

        </div>
    )
}

SCSS code


.page{
    display: flex;
    align-items: center;
}

.swiper-container{
    width: 50%;
    height: 50%;
    border: solid black;

    .swiper-slide{
        border: solid red;
    }
}

Upvotes: 0

Views: 1265

Answers (1)

Kyowan Kim
Kyowan Kim

Reputation: 409

I figured out the issue. Within my "index.html" file I had an "overflow-x: hidden" within my "" element which was causing the slides to cut off. I removed it and all the carousels are working!

Hope this solution helps anyone else struggling with this issue as well!

Upvotes: 0

Related Questions