スライドショーを学ぼう

スライドショーとは複数のコンテンツを順番に表示させる機能のことで、トップページの最上部にみられることが多い要素です。

例えばこういうの。

これを独自に実装するのはなかなかハードルが高いので、大抵の場合ライブラリを用いて実装することになります

有名どころはいくつかありますが、個人的にはSwiper.jsが好みです。

そんなスライドショーを学べる記事をまとめました。

eclairのブログ

URL:https://eclair.blog/swiper/

前述の通り、スライドショーは主にライブラリを用いて実装することが多いです。その中のSwiper.jsというライブラリの、よくある使い方がまとまっています。

まずはこの記事でswiper.jsに慣れましょう。

難易度:★☆☆

セカヤサブログ

URL:https://itokoba.com/archives/1661

Swiper.jsについてより実践的な使い方について書かれています。
すでにswiper側が用意してくれているボタンなどの見た目を変更する方法など、具体的な実装方法を学びたい場合はこちらを読みましょう。

難易度:★★☆

Web Design Leaves

URL:https://www.webdesignleaves.com/pr/plugins/swiper_js.html

Swiper.jsの使い方において、非常に多くのパターンを網羅しています。公式リファレンスももちろん網羅的に情報が載っていますが、こちらは日本語で書かれているのが非常にありがたいですね。

「ある程度は使い慣れているけど、分からないことがあった」という場合にチートシート的に使ったり、「もっとswiperを使いこなしたい」という時に読むと良いでしょう。

難易度:★★★

Leave a Reply

Your email address will not be published.