Prevent auto focus or slide switch on slider drag

[jfpintal]

I would like to know if it's possible to prevent auto selecting or focusing another other slide when I move or drag the slider? I would like the focus/selection to work only when I click an element.

I'M using it for main / thumbnail setup and i would like to allow only click navigation for the thumbnail section...

[NaotoshiFujita]

You can't do it by the sync method, but it is technically possible by APIs and events.

1. Create main and thumbnail slider respectively (without sync)
2. Observes the click event (https://splidejs.com/guides/events/#click) of the thumbnail slider
3. Moves the main slider by go() (https://splidejs.com/guides/apis/#go)

[karaage000]

@NaotoshiFujita
Hello.
I would like to do the same thing as the person who asked the question.
But the main slider does not change unless I click twice on the thumbnail.
Do you know why?

import { Splide, SplideSlide , } from "@splidejs/react-splide"
import '@splidejs/react-splide/css';
import { useEffect } from "react";
import { Options } from "@splidejs/react-splide";
import React from "react";

export const DemoSlider = () =>{
	const  mainRef = React.createRef<Splide>();
	const  subRef = React.createRef<Splide>();

	const mainOptions:Options = {
		type:'fade',
		perPage:1,
		pagination:false,
	}

	const subOptions:Options = {
		pagination:false,
		direction:'ttb',
		isNavigation:true,
		perPage:1,
		width:'100%',
		height:'70',
		
	}

	const Row = () => {
		return(
			<>
				<SplideSlide >
					<img src="https://stand-4u.com/stand-4u/html/swiper/images/nature-3.jpg" alt="Image 1"/>
				</SplideSlide>
				<SplideSlide >
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 2"/>
				</SplideSlide>
				<SplideSlide>
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 1"/>
				</SplideSlide>
				<SplideSlide>
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 2"/>
				</SplideSlide>
				<SplideSlide>
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 1"/>
				</SplideSlide>
				<SplideSlide>
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 2"/>
				</SplideSlide>
				<SplideSlide>
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 1"/>
				</SplideSlide>
				<SplideSlide>
					<img src="https://dummyimage.com/600x400/000/fff" alt="Image 2"/>
				</SplideSlide>
			</>)
	}

	const moveSlide = (id:any) => {
		mainRef.current?.go(id)
	}

	return (
		<div className="box">
			<Splide options={ subOptions } ref={subRef} className={'sub'}
			onClick={(slide)=>{moveSlide(slide.index)}}>	
				<Row/>
			</Splide>
			<Splide options={ mainOptions } ref={mainRef} className={'main'}>
				<Row/>
			</Splide>
		</div>
	)
}