....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 Heroin.242eb634b702bd9fbbc8.hot-update.js:39 Uncaught TypeError: Cannot read properties of undefined (reading 'id').slick-current+.slick-slide.slick-active a img {
filter: none !important;
}require(['jquery'], function ($) {
var removeSlash = function (string) {
return string.replace(/^\/|\/$/g, '');
}
const rootUrl = window.location.origin;
var currentUrl = window.location.href;
$('.uxnav-main-prod li a, .uxnav-main-prod li span.redir-mask').each(function () {
if (removeSlash(currentUrl) === [rootUrl, removeSlash($(this).attr('href'))].join('/') || removeSlash(currentUrl) === removeSlash($(this).attr('href')) || removeSlash(currentUrl) === [rootUrl, removeSlash($(this).attr('data-submit'))].join('/')) {
$(this).parents('li.level0.category-item').addClass('current');
}
})
})require(['jquery'], function ($) {
const rootUrl = window.location.origin;
var currentUrl = window.location.href;
$('.uxnav-main-prod li a, .uxnav-main-prod li span.redir-mask').each(function () {
if (currentUrl === [rootUrl, $(this).attr('href')].join('/') || currentUrl === $(this).attr('href') || currentUrl === [rootUrl, $(this).attr('data-submit')].join('/')) {
$(this).parents('li.level0.category-item').addClass('current');
}
})
})require(['jquery'], function ($) {
var removeSlash = function (string) {
return string.replace(/^\/|\/$/g, '');
}
const rootUrl = window.location.origin;
var currentUrl = window.location.href;
$('.uxnav-main-prod li a').each(function () {
if (removeSlash(currentUrl) === [rootUrl, removeSlash($(this).attr('href'))].join('/') || removeSlash(currentUrl) === removeSlash($(this).attr('href'))) {
$(this).parents('li.level0.category-item').addClass('current');
}
})
$('.uxnav-main-prod li span.redir-mask').each(function () {
if (removeSlash(currentUrl) === [rootUrl, removeSlash($(this).attr('data-submit'))].join('/')) {
$(this).parents('li.level0.category-item').addClass('current');
}
})
})$('.uxnav li a , .uxnav li span.redir-mask').each(function () {
.... тут код с заменой и функционалом...
}
Блин, да , точно - спасибо - меняю местами первый со вторым и order для десктопа, а для мобильных order сбрасываю.
Так получается!