ウェブ

Swiperでスライドを簡単に実装する方法(スワイパー)【jQuery不要】

swiper

スライダーはslickがありますがこちらはjQueryが必要になりますが、Swiperの場合はjQuery不要で利用可能です。

外部プラグインもjQueryも使わずに、高機能スライダーとして様々なカスタム可能。

▪Swiperの参考例⇩

➡ Swiper-スライド-CodePen

See the Pen Untitled by pull-design (@design90806871) on CodePen.

➡ Swiper-くるくる回転-CodePen

See the Pen Swiper-くるくる回転 by pull-design (@design90806871) on CodePen.

➡ Swiper-立体くるくる回転

See the Pen Untitled by pull-design (@design90806871) on CodePen.

➡ Swiper-引っ込みながらスライド

See the Pen Untitled by pull-design (@design90806871) on CodePen.

Swiper公式サイト

▪Swiperの公式サイト・・・https://swiperjs.com/

▪SwiperのCDN・・・https://swiperjs.com/get-started#use-swiper-from-cdn

▪Swiperのデモ・・・https://swiperjs.com/demos

Swiperの実装方法

SwiperファイルCDNで読み込む

<head></head>中にcssのCDNを記述。

</body>の直前にjsのCDNを記述。

<!-- Swiper CDN css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<!-- Swiper CDN js -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

Swiperの記述方法

<body></body>中に下記コードclass名を記述することでSwiperを使用することができます。

<div class=”swiper-slide”></div>中にimgタグで画像を入れて使います。

<!-- Swiper ↓ -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
    <div class="swiper-slide"><img src=""></div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>
<!-- Swiper ↑ -->
<script>
//ここにSwiper-js記述
</script>
</body>

SwiperのJS記述例

一番シンプルなスライド実装の場合は下記コードで実装可能です。

var swiper = new Swiper(".mySwiper", {
  loop: true, //ループを一番目初めからに設定
  navigation: { //矢印有効化
    nextEl: ".swiper-button-next", //矢印右
    prevEl: ".swiper-button-prev", //矢印左
  },
});

Swiperのパラメータ

Swiperにはパラメータが用意されていて、<script></script>の中に記述してそれらを使ってスライダーをカスタマイズすることができます。

パラメータ

パラメータデフォルト内容
loopfalsetrue,を指定することでスライドをループさせることができます。
effect‘slide’スライドのエフェクトを指定で、”slide”, “fade”, “cube”, “coverflow”, “flip”, “creative”, “cards”の種類があります。
speed300スライドのスピードを指定します。デフォルトは300です。
initialSlide0開始するスライドのインデックスを指定0が1番目のスライドになります。
direction‘horizontal’スライドする方向を指定。水平方向:’horizontal’ 垂直方向:’vertical’を指定した場合は、heightを指定します。
autoHeightfalsetrueを指定すると現在のスライドに合わせて高さを自動的に調整してくれます。
spaceBetween0スライド間の余白をpxで指定します。マージンを指定している場合、ナビゲーションが正常に機能しない場合があります。
slidesPerView1一度に表示するスライドの数を設定することが可能です。数値または ‘auto’ を指定します。
slidesPerGroup1同時にスライドさせるスライドの数を設定します。
slideToClickedSlidefalsetrueと設定すると、スライドをクリックするとそのスライドへ移行スライドします。
centeredSlidesfalsetrue を指定するとアクティブなスライドを中央に配置します。
loopedSlidesnullslidesPerView にautoを設定した場合、前後に複製するスライドの数を指定します。
パラメータ

自動再生:autoplay

自動的にスライドを開始し再生させる場合はautoplayを設定します。

パラメータデフォルト内容
delay3000スライド間の間隔をミリ秒で指定します。(例)delay: 5000,と記述すると、5秒後に次のスライドへ移行します。値を指定しない場合は自動再生は無効になります。.mySwiperに対してautoplayを設定してミリ秒の値を指定します。
stopOnLastSlidefalsetrueを指定すると、最後のスライドに達したら停止します。ループでは無効です。
disableOnInteractiontrueユーザが操作したら自動再生をストップさせる設定です。falseを指定すると操作があっても自動再生を継続します。
reverseDirectionfalsetrueを指定で、逆方向に自動再生します。
autoplayパラメータ

Swiper応用編

ズームしながらフワッと画像を切り替えるzoomUpを追加したSwiperです。

delay: 5000,で5秒後に次のスライドへ移動し、speed: 3000,で3秒かけて画像が切り替わります。

See the Pen Swiper-全画面ズーム画像差し替え by pull-design (@design90806871) on CodePen.

jQueryを使用する場合のフワッとスライダー

jQueryベースのプラグイン「slick」もあるので状況に合わせてスライダーは使い分けるのもいいかもしれませんね。

slickアイキャッチ画像
Slick/全画面でふわっと切り替えスライドショー【jQuery】スライダープラグイン【slick】を使って全画面スライドショーを実装。「slickの実装方法」と「slickのカスタマイズ」について解説していきます。画像のスライドショーにはいろんな方法がありますが、jQueryベースの【slick】が安定していてカスタマイズもしやすいのでオススメです。コピーペーストで実装可能です。...

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA