【jQueryでスライドショー】Swiperの使い方 スライダーが簡単, 作り方, 動かない場合など

man

困ってる人

スライダーやスライドショーを作るのに何か使いやすいライブラリはないかなぁ?

それでしたら今回は、Swiperの使い方をご紹介致しますね

operator

オペレーター


こんにちは、よろと申します。

今回は、jQueryでスライダーやスライドショーを作るのに、簡単で便利なSwiperのご紹介。

【jQueryでスライドショー】Swiperの使い方 スライダーが簡単, 作り方, 動かない場合など

まずは、Swiperのダウンロードから、

https://github.com/nolimits4web/swiper


「Clone or download」

Download ZIP

今回必要になるファイルは

・swiper.css
・swiper.js

この2点。

ファイルの保存場所、階層については、

index.html

cssフォルダ
style.css
swiper.css

sassフォルダ
style.scss

imageフォルダ
画像

jsフォルダ
swiper.js

ファイルを読み込む時は、

head内に、

body閉じタグの手前に、

今回は、正方形の色のついた画像を、5色分用意してみた。

今回作るのは、こんな感じのスライドショー。

・HTML

これが基本形で、クラス名は変えずにそのまま使うのが便利。

style.cssは触らなくても、

HTMLを書いたのと同時に、swiper.cssを読み込んだ時点でブラウザを開けば、何かしらの表示がされるはず。

ただしこのままだと見た目の面で、一体何なのかが分かりづらいので、

スライダーの周りの枠と、サイズを適当に作る。

スライダーの全体的なサイズを決める時は、CSS(style.css)で、

例えばこんな感じ。

でOK。

そうすると、今の状態だとこんな感じ。

スライダーの画像の見た目を整える

今回用意した画像が単なる正方形なので、今のままだと見た目が悪い、

という事で、中の画像をスライダーの画面いっぱいに広げる、

そうすると、画像がスライダーの画面一杯に広がる。

見た目の部分に関しては、ある程度出来上がったので、

次に、普通にスライドショーとして機能させてみる。

Swiperのスライドショーとしての通常の使い方

script.jsに、jQueryを書いてスライダーとして機能させる。

とりあえず、まずはこう書く事によって、スライドショーの準備はOK、これが基本形。

ただし今の状態だと、まだ矢印をクリックしても何も反応が無い、

ページャーもついてないし自動でスライド処理もしないので、ここから内容を追加して、ある程度まともなものにしていく。

・矢印をクリック出来るようにするには、

を追加すればOK。

そうすると、矢印をクリックして画像をスライドさせる事が出来るようになる。

(もし、これが出来ないとすると、ファイルの読み込み方や、どこかで何かしらの書き間違いをしている可能性がある)

そして次、

今のままだと、自分で画像を横にスライドさせないと次の画像が見れないので、画像が自動的に流れるようにする設定。

自分で画像をスライドさせなくても、自動的に画像がスライドしていくように設定する場合

autoplay: true,

を追加。

そうするとこんな感じ。

ただし、今のままだと矢印をクリックしていって、最後の画像まで到達したらクリックが出来なくなるデフォルトの設定、

なので今回は試しに、わざわざ一枚目の画像まで戻らなくても済むように、ループ処理をさせる、その場合は、

loop: true,

これを追加する事で、一番最後の画像まで行ったとしても、自動的にまた最初の画像まで繋いでくれる。

ページャーを表示させる

次は、ページャーを表示させて、今何枚目の画像を見ているのかというのを分かるようにする設定。

そうすると、script.jsの中身はこんな感じ。

その結果、ページャーが表示されるようになる。

矢印、アイコンの設定方法

次は、矢印の大きさや、アイコンを変更してみる。

もし、CSSが反映されない場合は、

style.css側で、!importantを使って無理矢理設定を反映させるか、

swiper.cssの方を、直接書き換えちゃう。

そうすると、矢印アイコンが無事に変更されるはず。

もし何をやっても思い通り上手くいかない場合は、swiper.cssの影響が関係している可能性があるので、そっちを直接書き換えてみるのも方法の一つ。

2カラムで左右いっぱいに広げる

次は、試しに2カラムで、右側にスライダーを表示させてみる。

・HTML

・CSS

SCSSだと、

こうなる。

swiper-containerには、元々swiper.css側で、marginがかけられているので、

そのまま使う場合、スライダーの両サイドにかなり大きめの空白が出来てしまう、なので、

margin: 0 !important; で、まずは周りの空白をリセット。

そうするとこんな感じで2カラムになる。

もしも、カラムやスライダーにサイズの指定がある場合は、

widthや、min-widthなどを上手く使って、ウィンドウサイズが変わっても、中身も上手くサイズが変わるように設定する。

ページャーの場所、位置の変え方(今回は右上に設置してみる)

まず、swiper.cssの、.swiper-pagination-bulletsで、width: 100%;の指定がされているため、

これがあると要素が横いっぱいに広がってしまい、自由に位置を動かせない。

なので、ここでページャーの横幅指定を一旦取り消し。

次に、.swiper-paginationの、toprightで、ページャーの場所を微調整、

元々、swiper.css側で、leftbottomの設定がされているので、ここを帳消しにしないと位置の調節が出来ない。

そのため、leftbottomを、!importantを使ってデフォルトの状態に戻す。

そうするとこんな感じで、ページャーが右上に移動する。

ページャーの色、大きさの設定

次に、ページャーの色や大きさの設定。

.swiper-pagination-bulletの、widthheightで玉の大きさを変える。

その際には、やっぱりswiper.cssの影響で、!importantを使用しないとCSSが反映されない。

なので、ページャーの位置やデザインを簡単に変更したい場合は、swiper.cssを直接書き換えた方が早いかも。

最後に、まとめ

Swiperには、単純なスライダー以外にも、フリップやフェードなど、他にも沢山の機能があるので、

興味がある人は、いろいろと試してみるといいかも。

その場合の書き方としては、フリップさせる場合は、script.jsに、

effect: “flip”,

を追加すればOK。

他にも、

effect: “fade”, だったり、
effect: “cube”, だったり、
effect: “coverflow”, だったりと、いろいろとあるので、興味がある人は動きを試しに見てみるといいかも。

Swiperに関しては、いろんなサイトにいろんな書き方が載っていますが、もし何を試しても全く動かないという場合は、

これが、jQueryの基本的な書き方。

終わり。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール