簡単なスライダーの実装方法【jQuery】
こんにちは！スズキです。
今回はスライダーの実装方法を紹介します。
スライダーとは、webサイトにおいて、画像などをスライドショーにする仕組みのことです。
このスライダーは、JavaScriptライブラリの「Swiper」を利用することで簡単に実装できます。
記事の内容
- CDNからライブラリを読み込む
- コーディング
スポンサードサーチ
CDNからライブラリを読み込む
コーディングに入る前に、Swiperを使うための準備をします。
と言っても簡単で、CDNを読み込むだけです。
下記のコードを、Swiperを使いたいHTMLファイルにコピペしましょう。
<!-- ライブラリ読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
“swiper.min.css”はheadタグ内、”swiper.min.js”はbodyの終了タグの直前に貼り付ければ良いかと思います。
コピペができたら、cssファイルとjsファイルを用意して、準備完了です。
コーディング
次にコーディングです。
HTML
<!-- Swiperここから -->
<div class="swiper-container">
<!-- メイン -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide slide1">slide 1</div>
<div class="swiper-slide slide2">slide 2</div>
<div class="swiper-slide slide3">slide 3</div>
<div class="swiper-slide slide4">slide 4</div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- 次へボタンと戻るボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiperここまで -->スライダー部分のレイアウトを書いていくのですが、
- .swiper-container
- .swiper-wrapper
- .swiper-slide
の構造を守るようにしてください。
これを崩すと動かなくなります。
クラス名もこのまま使ってください。
ページネーションや、次へボタン、戻るボタンも設置する場合は、.swiper-container内に記述してください。
CSS
CSSでは特別な記述は必要ありません。
スライダーのスタイルを書いていきましょう。
js
var mySwiper = new Swiper ('.swiper-container', {
/* エフェクトを設定 */
effect: "flip",
/* 最後のスライドに達すると、続けてスライド可能 */
loop: true,
/* ページネーション、次へボタン、戻るボタンを設定 */
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
})jsファイルには上のコードをコピペしてください。
effectの部分でアニメーションを設定します。
“flip”の他に、”slide”や”fade”などがあります。
loop: trueで、最後のスライドに達しても、スライドが可能になります。
スポンサードサーチ
まとめ
いかがでしたか。
「swiper」を使うことで、簡単にスライダーが実装できました。
今回は紹介しませんでしたが、ページネーションの大きさを変えるなど、カスタマイズも簡単にできます。
ぜひ試してみてください。
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら