[JS]jQuery不要のコンテンツスライダーSwiperの使い方（デモあり）｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]jQuery不要のコンテンツスライダーSwiperの使い方（デモあり）

スポンサード

このブログでもbxsliderなど、いくつか便利なスライダープラグインを紹介させていただいておりますが、今回はjQuery不要の高機能スライダーSwiperの使い方を、デモ付きで紹介しようと思います。

SwiperはIMG画像ファイルだけでなく背景画像もスライド可能で、しかもレスポンシブ対応のスライダーなので、様々なサイトで利用することができると思います。

1 Swiperのダウンロード
2 Swiperの基本的な使い方（画像スライド）
3 背景画像をスライド

Swiperのダウンロード

以下のページよりSwiperのファイル一式をダウンロードします。

http://idangero.us/swiper/

（ダウンロードはGitHubから行います。）

GitHubからダウンロードしたswiper-master.zipを解凍して、swiper.min.cssとswiper.min.jsファイルを読み込みます。

<link rel="stylesheet" href="./swiper/swiper.min.css">
<script src="./swiper/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
effect: "fade",
loop: true,
autoplay: {
delay: 4000,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>

var mySwiper = new Swiper('.swiper-container', {

effect: "fade",

loop: true,

autoplay: {

delay: 4000,

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

});

</script>

Javascriptのオプションは色々指定できますが、上記例は個人的によく使う設定です。

●スライドのエフェクトはフェード
 ●ループ再生あり
 ●自動切り替えあり（4秒）
 ●画像の左右に次へ前へのナビゲーションボタン表示

以下のページでオプション一覧を確認することができますので、サイトに合わせて調整してみてください。

http://idangero.us/swiper/api/

Swiperの基本的な使い方（画像スライド）

まずは基本的な画像のスライドからご紹介します。

スライダーを設置したい場所に以下のような記述を行います。

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="file01.jpg" alt="files01"></div>
<div class="swiper-slide"><img src="file02.jpg" alt="files02"></div>
<div class="swiper-slide"><img src="file03.jpg" alt="files03"></div>
<div class="swiper-slide"><img src="file04.jpg" alt="files04"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

</div>

</div>

スライダーの高さや画像のmax-widthの値などは、サイトに応じてCSSで適宜調整してみてください。
画像ファイルのスライドデモは以下にありますので、こちらもぜひ参考にしていただければと思います。
画像スライドのデモ

背景画像をスライド

背景に写真を置いてその上にテキストを載せ、要素ごとスライドさせることもできます。

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider_section1">
<span>slider_section1のテキストが入ります。</span>
</div>
</div>
<div class="swiper-slide">
<div class="slider_section2">
<span>slider_section2のテキストが入ります。</span>
</div>
</div>
<div class="swiper-slide">
<div class="slider_section3">
<span>slider_section3のテキストが入ります。</span>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

<span>slider_section1のテキストが入ります。</span>

</div>

<span>slider_section2のテキストが入ります。</span>

</div>

<span>slider_section3のテキストが入ります。</span>

</div>

</div>

あとはCSSで以下のように指定すると良いかと思います。

<style type="text/css">
.swiper-wrapper {
position:relative
}
.slider_section1 {
width:100%;
height:75vh;
background:url(file01.jpg) no-repeat;
background-size:cover;
}
.slider_section2 {
width:100%;
height:75vh;
background:url(file02.jpg) no-repeat;
background-size:cover;
}
.slider_section3 {
width:100%;
height:75vh;
background:url(file03.jpg) no-repeat;
background-size:cover;
}
.swiper-slide span {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:680px;
height:50px;
margin:auto;
/*font-style*/
font-size:180%;
font-weight:200;
letter-spacing:0.15em;
color:#fff
}
</style>