I'm using React Slick centerMode
as my image carousel and trying to show 3 images at a time. Also, I would like to show the title of the image when it is centered (current index) only. The problem is it will show all the title at the same time. How can I hide left and right images' title and only shows the middle image's title?
my code:
function ImageSlider({ imageList }) {
const [currentSlide, setCurrentSlide] = useState(0);
const [indexSlide, setIndexSlide] = useState(0);
function ShowTitle(title) {
// If the index is on focused
if (currentSlide === indexSlide) {
return <p>{title}</p>;
}
// Otherwise return empty
return <p></p>;
}
function handleAfterChange(index) {
setIndexSlide(index);
const centerSlide = document.querySelector(
"div.slick-slide.slick-active.slick-center.slick-current"
);
setCurrentSlide(parseInt(centerSlide.getAttribute("data-index")));
}
return (
<Slider
className="center"
centerMode={true}
infinite={true}
autoplay={true}
autoplaySpeed={2000}
slidesToShow={3}
slidesToScroll={1}
afterChange={handleAfterChange}
>
{imageList.map((image) => (
<div key={image.id} id={image.id}>
<img
alt="image"
width={270}
height={120}
src={image.url}
/>
// I want this to show when it's centered, and hidden when it's not centred
<ShowTitle title={image.title} key={image.id} />
</div>
))}
</Slider>
);
}
The carousel html when index number 2 (out of 5) is centered:
<div class="slick-list" style="padding:0px 60px">
<div class="slick-track" style="width: 3640px; opacity: 1; transform: translate3d(-1040px, 0px, 0px); transition: -webkit-transform 500ms ease 0s;">
<div data-index="-4" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="-3" tabindex="-1" class="slick-slide slick-center slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="-2" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="-1" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="0" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 260px;">...</div>
<div data-index="1" class="slick-slide slick-active" tabindex="-1" aria-hidden="true" style="outline: none; width: 260px;">...</div>
<div data-index="2" class="slick-slide slick-active slick-center slick-current" tabindex="-1" aria-hidden="true" style="outline: none; width: 260px;">...</div>
<div data-index="3" class="slick-slide slick-active" tabindex="-1" aria-hidden="true" style="outline: none; width: 260px;">...</div>
<div data-index="4" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 260px;">...</div>
<div data-index="5" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="6" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="7" tabindex="-1" class="slick-slide slick-center slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="8" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
<div data-index="9" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 260px;">...</div>
</div>
</div>