『Swiperでカルーセルを実装しよう』をリリースしました
AOS、GLightbox に続き、「Web 制作を極めたいけれども JavaScript がムズカシイ…」という方のために、Swiper に関するレッスンをリリースしました。これを使えば Web 制作でよく使われる「カルーセル」を、簡単にページ内に組み込むことができるようになります。
カルーセルって？
さまざまなパターンがあったりしますが、「複数枚のコンテンツをスライドさせながら見せていく UI」が「カルーセル」ですね。
このカルーセルを実装するためのライブラリは複数ありますが、広く使われているのと、更新が活発なので、今回は Swiper を取り上げてみました。少しだけ JavaScript の知識が必要ですが、これを使えば、さまざまな種類のカルーセルを実装していくことができて便利です。
こういう方におすすめ！
HTML/CSSの学習をある程度終えた方で、「JavaScriptにも興味があるけど…最初は Web 制作でよく見る効果だけを実現できれば良いかな」という方におすすめです。
Swiper と同様の効果を実現するには、JavaScript の基本文法、データ構造、DOM API などなどを学ぶ必要がありますが、そこまで時間をかけられない、途中で力尽きてしまった…という方はぜひチャレンジしていただければと思います。
レッスンの特徴
今回のレッスンでは、Swiper の導入手順から、JavaScript オブジェクトの記法、よく使われるオプションまで、ざっと 13 回の動画でまとめてみました。
エディタとブラウザを使って動画通りに進めていけば、Web制作でよく見かける、シンプルなカルーセルを実装できるようになるはずです。興味のある方はぜひチェックしてみてください。
なお、Swiper に関しては、公式ドキュメントからは読み解きづらい、いくつかのカスタマイズ手法がよく使われています。そのあたりについてまとめた別のレッスンもリリース予定です。もうしばらくお待ちいただければ幸いです。
この記事が気に入ったらサポートをしてみませんか？