『Swiperでカルーセルを実装しよう』をリリースしました

AOS、GLightbox に続き、「Web 制作を極めたいけれども JavaScript がムズカシイ…」という方のために、Swiper に関するレッスンをリリースしました。これを使えば Web 制作でよく使われる「カルーセル」を、簡単にページ内に組み込むことができるようになります。

Swiperでカルーセルを実装しよう (全13回) - プログラミングならドットインストール

カルーセルって？

さまざまなパターンがあったりしますが、「複数枚のコンテンツをスライドさせながら見せていく UI」が「カルーセル」ですね。

こうした UI が「カルーセル」です

このカルーセルを実装するためのライブラリは複数ありますが、広く使われているのと、更新が活発なので、今回は Swiper を取り上げてみました。少しだけ JavaScript の知識が必要ですが、これを使えば、さまざまな種類のカルーセルを実装していくことができて便利です。

こういう方におすすめ！

HTML/CSSの学習をある程度終えた方で、「JavaScriptにも興味があるけど…最初は Web 制作でよく見る効果だけを実現できれば良いかな」という方におすすめです。

Swiper と同様の効果を実現するには、JavaScript の基本文法、データ構造、DOM API などなどを学ぶ必要がありますが、そこまで時間をかけられない、途中で力尽きてしまった…という方はぜひチャレンジしていただければと思います。

少しコードは書きますが、最初はコピー＆ペーストで OK です

レッスンの特徴

今回のレッスンでは、Swiper の導入手順から、JavaScript オブジェクトの記法、よく使われるオプションまで、ざっと 13 回の動画でまとめてみました。

エディタとブラウザを使って動画通りに進めていけば、Web制作でよく見かける、シンプルなカルーセルを実装できるようになるはずです。興味のある方はぜひチェックしてみてください。

Swiperでカルーセルを実装しよう (全13回) - プログラミングならドットインストール

なお、Swiper に関しては、公式ドキュメントからは読み解きづらい、いくつかのカスタマイズ手法がよく使われています。そのあたりについてまとめた別のレッスンもリリース予定です。もうしばらくお待ちいただければ幸いです。