<div id="A">
.....content for A ....
</div>
<div id="B">
.....content for B ....
</div>
<div id="C">
.....content for C....
</div>
<div id="D">
.....content for D ....
</div>
<div id="E">
.....content for E ....
</div>
background-image: url("data:image/svg+xml,%3Csvg width='65' height='65' viewBox='0 0 65 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32.601' cy='32.2966' r='32.0866' fill='url(%23paint0_radial_1_183)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_1_183'%3E%3Cstop offset='0%25' stop-color='%23FF0000'/%3E%3Cstop offset='100%25' stop-color='%23D9D9D9' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
....href="<?php the_field('form_link'); ?>"
import React, { useState, useEffect, useRef } from 'react'
import { BsChevronCompactLeft, BsChevronCompactRight, BsDot } from 'react-icons/bs'
import Slide_1 from '../assets/slide1.jpg'
import Slide_2 from '../assets/slide2.jpg'
import Slide_3 from '../assets/slide3.jpg'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
const slides = [
{
url: Slide_1
},
{
url: Slide_2
},
{
url: Slide_3
},
];
function Hero() {
const [currentIndex, setCurrentIndex] = useState(0);
const slideRef = useRef();
const prevSlide = () => {
const isFirstSlide = currentIndex === 0;
const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
setCurrentIndex(newIndex);
}
const nextSlide = () => {
const isLastSlide = currentIndex === slides.length - 1;
const newIndex = isLastSlide ? 0 : currentIndex + 1;
setCurrentIndex(newIndex);
}
const goToSlide = (slideIndex) => {
setCurrentIndex(slideIndex);
}
useEffect(() => {
const interval = setTimeout(nextSlide, 4000);
return () => clearTimeout(interval);
}, [currentIndex]);
return (
<div className='w-full h-auto mx-auto my-8'>
<div className='w-full max-w-[1280px] h-auto mx-auto duration-500 relative group'>
<SwitchTransition mode="out-in">
<CSSTransition
key={currentIndex}
nodeRef={slideRef}
addEndListener={done => slideRef.current.addEventListener('transitionend', done, false)}
classNames="fade"
>
<div ref={slideRef}>
<img className='mx-auto border-gray-100 border-[10px]' src={slides[currentIndex].url} alt="" />
</div>
</CSSTransition>
</SwitchTransition>
{/* left arrow */}
<div className='opacity-30 group-hover:opacity-100 absolute top-[50%] -translate-x-0 translaty-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer'>
<BsChevronCompactLeft onClick={prevSlide} size={30} />
</div>
{/* right arrow */}
<div className='opacity-30 group-hover:opacity-100 absolute top-[50%] -translate-x-0 translaty-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer'>
<BsChevronCompactRight onClick={nextSlide} size={30} />
</div>
</div>
<div className="flex top-4 justify-center py-2">
{slides.map((slides, slideIndex) => (
<div key={slideIndex} onClick={() => goToSlide(slideIndex)} className='text-2xl cursor-pointer'>
<BsDot />
</div>
))}
</div >
</div>
)
}
export default Hero
in.242eb634b702bd9fbbc8.hot-update.js:39 Uncaught TypeError: Cannot read properties of undefined (reading 'id')
этот проект не в докере, хотя докер да, запущен. И если не открывать проект в vs code, или открыть скажем в php storm, то папки не создаются.