3

I am unsure on how to add "spacing" between my slides in pure react carousel.

Is there any easy option how to add gaps between slides ? I've tried several approaches. I need correct padding when sliding one by one. When using margin, applying on slide or inner element, slider get broken, pushing last slide on new line block.

mrbinky3000
  • 4,055
  • 8
  • 43
  • 54

3 Answers3

4

Pure React Carousel components behave like a suite of HTML tags. A good analogy for the suite of Pure React Carousel components are the Table tags in HTML: table, thead, tbody, tr, th, tr, tfoot, colgroup, etc. The table tags are bare-bones, and only use default styles. You must apply css to them in order to customize your carousel.

Pure React Carousel is responsive by default. Meaning, it will stretch to the full width of its parent container unless the parent container uses CSS to restrict the width of Pure React Carousel.

The slides in Pure React Carousel have an intrinsic height by default. Meaning, just like an image tag, the height of each slide gets taller the wider each slide becomes. Just like the height of an image with no height attribute set gets taller the wider the image becomes in a browser.

The <Slide /> component has a child div with the class .carousel__inner-slide. To give your carousel the "illusion" of spacing between cells, create a css rule for .carousel__inner-slide in your project. That or pass the <Slide /> component a class name via the innerClassName prop.

Example:

.carousel__inner-slide {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  background-color: burlywood;
}

View a demo: https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark

mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
2

This worked for me:

.carousel__inner-slide {
  margin-right: 20px;
}
marzipan
  • 151
  • 1
  • 13
0

I know this is old but just wanted to chime in as the current answer didn't fit my use case. If you use className on the Slide adding the css margin-bottom: 2rem !important; for example. The padding-bottom of the slider tray wrap is calculated wrong but if you also do an override on slider using classNameTrayWrap as the percentage output in your css in my case 168.75 calculated from a 16 / 9 aspect ratio added to your 2rem multipled by the number of slides visible the size is correct and you have your spacing.

example code (excuse tailwind):

 <CarouselProvider
            // className="border-orange-500 border-2 border-solid"
            orientation="vertical"
            naturalSlideWidth={1920}
            naturalSlideHeight={1080}
            visibleSlides={3}
            interval={3000}
            isPlaying={true}
            infinite={true}
            totalSlides={propertyImages.length}
          >
            <Slider classNameTrayWrap="!pb-[calc(168.75%+6rem)]">
              {propertyImages.map((src, i) => (
                // <SwiperSlide key={i}>
                <Slide index={i} key={i} className="!mb-8">
                  <AspectRatio className="w-full" ratio={16 / 9}>
                    <Image
                      // fill={true}
                      layout="fill"
                      // loader={() => src}
                      src={src}
                      alt="University Campus"
                      className="rounded-2xl object-cover cursor-pointer"
                      onClick={() => openViewImage(i)}
                      // onClick={() => console.log('hey')}
                    />
                  </AspectRatio>
                </Slide>
              ))}
              {/* </div> */}
            </Slider>
          </CarouselProvider>
nrmad
  • 422
  • 9
  • 19