こんにちは、ヨロと申します。
今回は、jQueryでスライダーやスライドショーを作るのに、簡単で便利なSwiperのご紹介。
※追記：いろいろと手違いがあって、説明画像などの詳細が消えてしまったため、
毎回コードを書き直すごとにそれぞれでどのように変化があるかの動作確認をしていただけるとありがたいです。申し訳ありません。
ただし一応ソースコードは全て載せていますので、上から順番にやっていけば簡単に出来るはずです。
jQueryでスライドショーSwiperの使い方 ｜スライダーが簡単な作り方、動かない場合
まずは、Swiperのダウンロードから、
https://github.com/nolimits4web/swiper
↓
「Clone or download」
↓
Download ZIP
今回必要になるファイルは
・swiper.css
・swiper.js
この２点。
ファイルの保存場所、階層については、
index.html
cssフォルダ
– style.css
– swiper.css
sassフォルダ
– style.scss
imageフォルダ
– 画像
jsフォルダ
– swiper.js
ファイルを読み込む時は、
head内に、
<link rel="stylesheet" href="css/swiper.css">そしてjQueryとswiper.jsの読み込む場合は、body閉じタグの手前に、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/swiper.js"></script>今回は正方形の色のついた画像を、５色分用意してみた（背景画像は各自適当に探して使ってみて下さい）
今回作るのは、こんな感じのスライドショー。
HTML部分
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image/*****.jpg" alt="〇〇"></div>
<div class="swiper-slide"><img src="image/*****.jpg" alt="〇〇"></div>
<div class="swiper-slide"><img src="image/*****.jpg" alt="〇〇"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>これが基本形で、クラス名は変えずにそのまま使うのが便利。
style.cssは触らなくても、
HTMLを書いたのと同時に、swiper.cssを読み込んだ時点でブラウザを開けば、何かしらの表示がされるはず。
ただし今のままだと見た目の面で、一体何なのかが分かりづらいので、
スライダーの周りの枠と、サイズを適当に作る。
スライダーの全体的なサイズを決める時は、CSS（style.css）で、
// ここで全体的なサイズを決める。
.swiper-container {
// ここに処理の内容を書いていく
}例えばこんな感じ。
// スライダーのサイズと枠：例
.swiper-container {
width: 500px;
height: 300px;
border: 4px solid black;
}でOK。
どのような変化があるかは、設定を変えるごとにその都度確認してみて下さい。
スライダーの画像の見た目を整える
今回用意した画像が単なる正方形なので、今のままだと見た目が悪い、
という事で、中の画像をスライダーの画面いっぱいに広げる、
// 中の画像をスライダーいっぱいに広げる
.swiper-container img {
width: 100%;
height: 100%;
}そうすると、画像がスライダーの画面一杯に広がる。
見た目の部分に関しては、ある程度出来上がったので、
次に、普通にスライドショーとして機能させてみる。
Swiperのスライドショーとしての通常の使い方
script.jsに、jQueryを書いてスライダーとして機能させる。
$(function() {
let swiper = new Swiper('.swiper-container', {
// ここに処理の内容を追加していく。
});
});とりあえず、まずはこう書く事によって、スライドショーの準備はOK、これが基本形。
ただし今の状態だと、まだ矢印をクリックしても何も反応が無い、
ページャーもついてないし自動でスライド処理もしないので、ここから内容を追加して、ある程度まともなものにしていく。
・矢印をクリック出来るようにするには、
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},を追加すればOK。
↓
// 矢印をクリック出来るようにする：例
$(function() {
let swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});そうすると、矢印をクリックして画像をスライドさせる事が出来るようになる。
(もし、これが出来ないとすると、ファイルの読み込み方や、どこかで何かしらの書き間違いをしている可能性がある)
そして次、
今のままだと、自分で画像を横にスライドさせないと次の画像が見れないので、画像が自動的に流れるようにする設定。
自分で画像をスライドさせなくても、自動的に画像がスライドしていくように設定する場合
autoplay: true,
を追加。
そうするとこんな感じ。
// 自動で画像をスライドさせる設定
$(function() {
let swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: true,
});
});ただし、今のままだと矢印をクリックしていって、最後の画像まで到達したらクリックが出来なくなるデフォルトの設定、
なので今回は試しに、わざわざ一枚目の画像まで戻らなくても済むように、ループ処理をさせる、その場合は、
loop: true,
これを追加する事で、一番最後の画像まで行ったとしても、自動的にまた最初の画像まで繋いでくれる。
ページャーを表示させる
次は、ページャーを表示させて、今何枚目の画像を見ているのかというのを分かるようにする設定。
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},そうすると、script.jsの中身はこんな感じ。
// script.js
$(function() {
let swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: true,
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
});その結果、ページャーが表示されるようになる。
矢印、アイコンの設定方法
次は、矢印の大きさや、アイコンを変更してみる。
もし、CSSが反映されない場合は、
style.css側で、!importantを使って無理矢理設定を反映させるか、
swiper.cssの方を、直接書き換えちゃう。
// 矢印アイコンを変更
.swiper-button-prev { /* 矢印アイコンの設定 */
background: url(画像のURL) no-repeat center !important;
background-size: 25px 25px !important; /* ここでサイズ */
}
.swiper-button-next { /* 矢印アイコンの設定 */
background: url(画像のURL) no-repeat center !important;
background-size: 25px 25px !important; /* ここでサイズ */
}そうすると、矢印アイコンが無事に変更されるはず。
もし何をやっても思い通り上手くいかない場合は、swiper.cssの影響が関係している可能性があるので、そっちを直接書き換えてみるのも方法の一つ。
２カラムで左右いっぱいに広げる
次は、試しに２カラムで、右側にスライダーを表示させてみる。
HTML
<div class="flex_box">
<div class="column_left">左側のカラム</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image/〇〇.jpg" alt="〇〇.jpg"></div>
<div class="swiper-slide"><img src="image/〇〇.jpg" alt="〇〇.jpg"></div>
<div class="swiper-slide"><img src="image/〇〇.jpg" alt="〇〇.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>CSS
.flex_box {
display: flex; /* ここでカラムを横並びに */
}
.flex_box .column_left {
width: 100%;
border: 4px solid black;
margin-right: auto;
}
.flex_box .swiper-container {
max-width: 70%;
height: 75vh;
border: 4px solid black;
margin: 0 !important;
}
.flex_box .swiper-container img {
width: 100%;
height: 100%;
}SCSSだと、
.flex_box {
display: flex; /* ここでカラムを横並びに */
.column_left {
width: 100%;
border: 4px solid black;
margin-right: auto;
}
.swiper-container {
max-width: 70%;
height: 75vh;
border: 4px solid black;
margin: 0 !important;
& img {
width: 100%;
height: 100%;
}
}
}こうなる。
swiper-containerには、元々swiper.css側で、marginがかけられているので、
そのまま使う場合、スライダーの両サイドにかなり大きめの空白が出来てしまう、なので、
margin: 0 !important; で、まずは周りの空白をリセット。
そうすると無事に２カラムになる。
もしも、カラムやスライダーにサイズの指定がある場合は、
widthや、min-widthなどを上手く使って、ウィンドウサイズが変わっても、中身も上手くサイズが変わるように設定する。
ページャーの場所、位置の変え方(今回は右上に設置してみる)
// ここでページャーの横幅指定を一旦取り消し
.swiper-pagination-bullets {
width: initial !important; //（swiper.cssではここが width: 100%;になっているため、これがあると要素が横いっぱいに広がってしまい、自由に位置を動かせない）
}
.swiper-pagination {
top: 20px;
right: 30px;
left: initial !important;
bottom: initial !important;
}まず、swiper.cssの、.swiper-pagination-bulletsで、width: 100%;の指定がされているため、
これがあると要素が横いっぱいに広がってしまい、自由に位置を動かせない。
なので、ここでページャーの横幅指定を一旦取り消し。
次に、.swiper-paginationの、topとrightで、ページャーの場所を微調整、
元々、swiper.css側で、leftとbottomの設定がされているので、ここを帳消しにしないと位置の調節が出来ない。
そのため、leftとbottomを、!importantを使ってデフォルトの状態に戻す。
そうするとページャーが右上に移動する。
ページャーの色、大きさの設定
次に、ページャーの色や大きさの設定。
.swiper-pagination-bullet {
width: 5px !important; // !importantが必要
height: 5px !important; // !importantが必要
}
.swiper-pagination-bullet-active {
border: 3px solid #007aff; // アクティブ時、選択されている画像時の玉の色と大きさ
}.swiper-pagination-bulletの、width、heightで玉の大きさを変える。
その際には、やっぱりswiper.cssの影響で、!importantを使用しないとCSSが反映されない。
なので、ページャーの位置やデザインを簡単に変更したい場合は、swiper.cssを直接書き換えた方が早いかも。
jQueryでスライドショーSwiperの使い方 ｜スライダーが簡単な作り方、動かない場合｜最後に
Swiperには、単純なスライダー以外にも、フリップやフェードなど、他にも沢山の機能があるので、
興味がある人は、いろいろと試してみるといいかも。
その場合の書き方としては、フリップさせる場合は、script.jsに、
effect: “flip”,
を追加すればOK。
他にも、
effect: “fade”, だったり、
effect: “cube”, だったり、
effect: “coverflow”, だったりと、いろいろとあるので、興味がある人は動きを試しに見てみるといいかも。
Swiperに関しては、いろんなサイトにいろんな書き方が載っていますが、もし何を試しても全く動かないという場合は、
// jQueryの基本的な書き方
$(function() {
この中に命令を書いていくといいかも。
});これが、jQueryの基本的な書き方。
終わり。
