1

Is it possible to make the arrows/buttons on the right and left sides be outside of the carousel items?

Links to the libarary:

enter image description here

Norah Jones
  • 427
  • 5
  • 17

3 Answers3

3

You can always add css to the arrows

By default, left arrow has:

left: calc(4% + 1px);

and right arrow has:

right: calc(4% + 1px);

If you have space on the sides of carousel you can change that css.

Nuno Azevedo
  • 134
  • 7
  • I tried adding: ` .react-multiple-carousel__arrow { right: 0; } ` – Norah Jones Dec 28 '20 at 21:39
  • However, this gets overwritten by the default value implemented in the library. How can I bypass it? – Norah Jones Dec 28 '20 at 21:40
  • 1
    try with !important -> ` .react-multiple-carousel__arrow { right: 0 !important; } ` – Nuno Azevedo Dec 28 '20 at 22:09
  • I'm trying this approach, but don't know if this can work. The arrows are within `react-multi-carousel`, which has `overflow: hidden;`. Because of this, the arrows won't be displayed – Hiroki Jun 17 '21 at 05:16
  • I managed to achieved it by giving proper margin and padding to the cards showing inside the `carousel`. But for me I just needed to show single card at a time in the `carousel` so not sure if this can work here also, – Shadab Sep 22 '21 at 06:11
2

Adding this to css file worked for me

.react-multi-carousel-list{
  position: unset !important;
}

React Code :

           <Carousel
                    swipeable={true}
                    draggable={true}
                    autoPlay={false}
                    showDots={true}
                    ssr={true}
                    renderDotsOutside={true}
                    arrows={true}
                    dotListClass={styles.carousel_dot}
                    responsive={responsive}
                  >
16_Drakshi Chopra
  • 21
  • 2
1

THIS ONE IS WORK FOR ME!

  1. you need to add wrapper to your Carousel.
  2. set position relative to the wrapper.
  3. set position unset to the carousel.
  4. set position absolute to the arrow.

.gd-carousel-wrapper {
    position:relative;

}

.gd-carousel {
    position:unset;

    .react-multiple-carousel__arrow {
        position:absolute;
    }

    .react-multiple-carousel__arrow--left {
        left: calc(-3% + 1px)
    }

    .react-multiple-carousel__arrow--right {
        right: calc(-3% + 1px)
    }
}
`<div className="gd-carousel-wrapper">
    <Carousel
      responsive={responsive}
      // autoPlay={true}
      className="gd-carousel"
    >
    <div>Item1</div>
    <div>Item2</div>
    <div>Item3</div>
    <div>Item4</div>
    </Carousel>
 </div>`
Fauzan Taufik
  • 189
  • 3
  • 5