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

Javascript・jQuery

2017.10.01

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

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

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

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>

.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>

背景画像のスライダーデモはこちらです。

背景画像のスライドデモ