I have struggled the whole day to create a centered carousel with react-alice-carousel library and the results are those. Link to the library here

Basically I achieve the results showcased on the gif which were fulfilling enough for me but the fact that the focused image (the one on the left) is not centered is bugging me a lot. I have tried overwriting certain CSS properties but the results were not great (carousel item disappears if I try absolute positioning). My question is - is there a certain algorithm I can add to my logic so that the centered image would be in the middle of the carousel always? (2nd item in array of 3, 3rd item in array of 5, 4th item in an array of 7 and etc.) and if such algorithm does not exist how can I achieve to make my carousel centered-oriented.

Sandbox:
Targeted tile (plays the role of the product in my gif) is marketed in red color

Also mostly my carousel in the project:

 // Carousel helper properties / functions const responsive = { 2000: { items: 11, }, 1200: { items: 5, }, 800: { items: 3, }, 0: { items: 1, }, }; const handleDragStart = (e: any) => e.preventDefault(); const items = products.map((product, index) => ( <img key={product._id} className={selectedIndex === index ? "focusedImage" : "shownImage"} onDragStart={handleDragStart} style={{ height: "150px", width: "150px" }} src={product.image} alt='Product that is being sold on this page' /> )); return ( <main> <div className='details__wrapper'> <AliceCarousel activeIndex={selectedIndex} mouseTracking responsive={responsive} items={items} infinite controlsStrategy={"default"} autoPlayStrategy='all' autoPlayInterval={1000} disableDotsControls disableButtonsControls keyboardNavigation onSlideChanged={(e: EventObject) => { setSelectedIndex(e.item); setSelectedProduct(products[e.item]); }} />

As seen all of the images that are seen by the user already have classes "shown" or "focused" image

And my SASS:

.alice-carousel { &__wrapper { & .alice-carousel__stage { &-item { z-index: 0 !important; & .shownImage { opacity: 0.5; margin: 0 auto; grid-area: image; display: block; border: 2px solid; border-radius: 50%; height: 20rem !important; width: 20rem !important; } &.__target { z-index: 1 !important; .focusedImage { opacity: 1 !important; } } } } }
}

Mostly classes already listed in the documentation on GitHub.

2

1 Answer

I've had luck adding text-align: center; to the .alice-carousel class.

.alice-carousel { position: relative; width: 100%; margin: auto; direction: ltr; text-align: center;
}

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.