📖

react-splideでクリック時にスライドさせる

2023/09/24に公開

TypeScript

reactsplide

tech

やりたいこと

react-splideでは簡単にカルーセルを実装でき、左右に移動ボタンを出したり、ページネーションを出したりできます。しかし画面を作る際に特定の要素をクリックした時に次のスライドに移動したり、前のスライドに戻すような制御をしたい。

公式の資料をみるとそのような制御も可能と記載あり。左右のボタンを消して、スライドするメソッドが準備されているようです。

実装

まずはチュートリアルとして動かす。こちらの記事を参考にさせていただきました

左右のボタンを消す

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

<Splide id="image-carousel"
　　aria-label="igc"
　　options={
　　　　autoplay: false,
　　　　　arrows: false, // 左右のボタンを非表示にする
 }
　　ref={mainRef}
>

Aタグをクリックしたら次のスライドに移動する

import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/splide/css';
const mainRef = useRef<Splide>(null);

async function onLinkClick() {
　　mainRef.current.go('>') 
}

<Splide id="image-carousel"
　　aria-label="igc"
　　options={
　　　　autoplay: false,
　　　　　arrows: false, // 左右のボタンを非表示にする
 }
　　ref={mainRef}
>

　　<SplideSlide>
 　　<p>1</p>
　　　　<a onClick={onLinkClick} href="javascript:void(0);">LINK</a>
　　</SplideSlide>
　　<SplideSlide>
 　　<p>2</p>
　　</SplideSlide>
</Splide>

左右のボタンを消して、リンククリック時にSplideを取得してスライドを動かすgoというメソッドをコールしています。引数に'>'を渡してあげると現在地の次スライドに移動する仕様のため、これで独自にスライドする実装は実現できました。

やりたいこと

実装

左右のボタンを消す

Aタグをクリックしたら次のスライドに移動する

Discussion