Open Sergey98Am opened 1 year ago
Hi @Sergey98Am I will work on this, kindly assigne it to me.
Hi @deepakrh185․ Thanks for responding
Hi @deepakrh185․ Thanks for responding
kindly assigne the bug to me @Sergey98Am
@Sergey98Am try to add useEffect(() => { if (mainRef.current && thumbsRef.current && thumbsRef.current.splide) { mainRef.current.sync(thumbsRef.current.splide); } }, [open]);
check it works or not !!
@deepakrh185. Tried it, unfortunately, it didn't work
@Sergey98Am can you brief me the scenario what it exactly happens?
@deepakrh185. Clicking the thumbnails slider doesn't change the main slider at the same time material-tailwind-splide.webm
@Sergey98Am I've got similar problem. In my case I have thumbnails on a page and detail view in a dialog. Fixed it by the following workaround:
<Splide
ref={(mainRefNode) => {
if (!mainRefNode) return;
setTimeout(() => {
mainRefNode.sync(thumbsRef.current.splide);
mainRefNode.go(thumbsRef.current.splide.index); // calling "go" here since "sync" doesn't go to appropriate slide
}, 0);
}}
...
>... </Splide>
Checks
Version
0.7.12
Description
I use React Splide in Material Tailwind library's modal dialog. I need to synchronize the main and thumbnail sliders, but in useEffect hook the sync() function doesn't work. The same issue also occurs when using the Headless UI library's modal instead of Material Tailwind (When the modal is built manually without the library,the sync works)
Reproduction Link
No response
Steps to Reproduce
export default function App() { const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(!open);
/**
The main Splide component. */ const mainRef = createRef();
/**
The thumbnail Splide component. */ const thumbsRef = createRef();
const mainOptions = { type: "loop", width: "800px", heightRatio: 1, pagination: false, arrows: false, cover: true, breakpoints: { 768: { heightRatio: 0.8, arrows: true, }, }, };
const thumbsOptions = { fixedWidth: 90, fixedHeight: 90, isNavigation: true, gap: 28, pagination: false, cover: true, arrows: false, };
useEffect(() => { if (mainRef.current && thumbsRef.current && thumbsRef.current.splide) { mainRef.current.sync(thumbsRef.current.splide); } }, []);
const slides = [ { src: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg', alt: 'img-1', }, { src: 'https://imgv3.fotor.com/images/blog-cover-image/part-blurry-image.jpg', alt: 'img-2', }, { src: 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_1280.jpg', alt: 'img-3', }, { src: 'https://dfstudio-d420.kxcdn.com/wordpress/wp-content/uploads/2019/06/digital_camera_photo-1080x675.jpg', alt: 'img-4', }, ]
const renderSlides = () => { return slides.map((slide) => (
)); };
return (
); }
Expected Behaviour
I need the sync() function to work in useEffect when using the Material Tailwind library