maxmarinich / react-alice-carousel

React responsive component for building content galleries, content rotators and any React carousels
MIT License
832 stars 91 forks source link

How to put arrows for navigation on the sides like in the example #290

Closed FabioTambu closed 1 year ago

FabioTambu commented 1 year ago

I was looking at the example on Github (see attachment) and there the arrows are on the sides instead of the bottom, I searched how to do it but I didn't succeed, could you tell me how to do it? GitHub Example

maxmarinich commented 1 year ago

Hi, @FabioTambu! There are some cases for it, the most common is pure css and carousel classnames (used Basic Example)

.s-main {
  padding: 100px;
}
.alice-carousel__prev-btn {
    position: absolute;
    left: -50px;
    display: inline-block;
    top: 75px;
    text-align: left;
    width: 50px;
    height: 50px;
}

.alice-carousel__prev-btn-item {
    display: inline-block;
    border: solid 2px #465798;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
}
Screenshot 2023-09-08 at 10 49 23
maxmarinich commented 1 year ago

Or create own custom controls and use refs to handle actions like here.