Как создать интерактивную карусель изображений, в которой нажатие кнопки на изображении отображает следующее изображение ⇐ CSS

[Anonymous]

Я создал один компонент response.js для создания карусели. И второй компонент, который показывает кнопку (Hotspot) на изображении.
Но мне не удалось объединить оба.
Я создал первый компонент под названием ImageCarousel.js. Благодаря этому мне удалось создать карусель.

Код: Выделить всё

import React, { useState } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const ImageCarousel = ({ images }) => {
const [currentSlide, setCurrentSlide] = useState(0);

const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
afterChange: (index) => setCurrentSlide(index)
};

const handleOverlayClick = (action) => {
// Handle different actions based on the image
if (action === 'go-to-next') {
const nextSlide = (currentSlide + 1) % images.length;
setCurrentSlide(nextSlide)
// Do something when the setting action is clicked
}
};

return (

{images.map((image, index) => (

[img]{image.src} alt={image.alt} /[/img]
{index === currentSlide && image.overlay && (
 handleOverlayClick(image.overlay.action)}

>
{image.overlay.text}

)}

))}

);
};

export default ImageCarousel;

Затем я создал второй компонент ImageWithHotspots.js. При этом у меня появилась кнопка на изображении, но мне удалось сделать это только на одном изображении, и я не могу добавить второе изображение.

Код: Выделить всё

import React from 'react';

const ImageWithHotspots = ({ src, hotspots }) => {
const handleHotspotClick = (action) => {
if (action === 'go-to-next') {
// Implement logic to move to the next slide
console.log('Moving to the next slide');
}
};

return (

[img]{src} alt=[/img]
{hotspots.map((hotspot, index) => (
 handleHotspotClick(hotspot.action)}
>
{hotspot.text}

))}

);
};

export default ImageWithHotspots;

Я хочу, чтобы это работало вот так

Подробнее здесь: https://stackoverflow.com/questions/784 ... -on-an-ima