ブログPV・アクセス

【コピペでOK】非jQueryの超軽量レスポンシブ対応スライダー「Swiper」の導入手順

更新日:

スライダーを道入したいと考え続けていていろんなプラグインのスライダーを導入してみたんだけど、プラグインでのスライダーはとにかく重い。一度はスライダーの道入を諦めたんだけど、遂に超軽量スライダー「Swiper」の道入に成功したから、その導入手順を解説したい。

本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。




Swiperは非jQueryだから軽い

書いてる俺がよくわかってないんだけど、ワードプレスのスライダープラグインはjQueryが使われているから重い。たくさんのワードプレスプラグイン製スライダーを入れたけど、どれも表示が1テンポ遅れて使い物にならなかった。これは脱プラグインを図るしか無いと決意して発見したのが「Swiper」だ。

軽いしレスポンシブ対応

Swiperは軽いクセにレスポンシブ対応もしていて、スマホでもパソコンでもキレイに表示される。しかもオプション(微調整)の項目が把握できないくらい多い。実際に今ここに表示されているスライダーがそれなんだけど、とにかく表示が早い。

 




実際に今ここに表示されているスライダーがそれなんだけど、とにかく表示が早い。普通にコンテンツと同じ感覚で表示されるおかげで閲覧者のストレスにならない。今日はこのスライダーの導入手順を紹介する。

道入のためにやること一覧

  • Swiper公式サイトから「swiper.css」と「swiper.js」を入手
  • 「swiper.css」と「swiper.js」をサーバーにアップロード
  • functions.phpに「swiper.css」と「swiper.js」の呼び出しコードを記入
  • Swiper本体のコードを任意の場所に記入

大まかに分けるとこれからやることはこんな感じだ。Swiperの動きを制御するファイルを入手してサーバーにFTP経由でアップロードしてから、それをfunctions.phpに呼び出しコードを書いて使える状態にする。あとは本体のコードを好きな場所に置くことでSwiperが動くようになる。

Swiper公式サイトから「swiper.css」と「swiper.js」を入手

Swiper公式サイトにアクセスしてから「Download」ボタンを押す。

取り敢えず一番新しいのをダウンロードしておけばいい。

回答すると「dist」フォルダがある。この中に「swiper.css」と「swiper.js」ファイルが入っているので、これをフォルダごとサーバーにアップロードする。

「swiper.css」と「swiper.js」をサーバーにアップロード

アップロード場所は今使っているテーマのphpファイルがある場所だ。俺の場合は「…wp-content/themes/affinger4-jet-child」フォルダにアップロードしている。

「swiper.css」と「swiper.js」にはサイズを小さくした「swiper.min.css」と「swiper.min.js」が同じフォルダに入っている。今回のやり方では「swiper.min.css」と「swiper.min.js」を使う。

functions.phpに「swiper.css」と「swiper.js」の呼び出しコードを記入

注意:functionc.phpをイジるときはバックアップを取るのを忘れないようにしましょう。ウェブページが表示されなくなります。

functions.phpの上から7行目くらいに下記の表記があると思うから、

function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

その直下にswiper.min.cssの呼び出しコードを書く。「/diet/css/swiper.min.css」はサーバーにアップロードしたファイルのパスだから、違うところにアップロードしてる場合はそのパスを記入する。

次にfunctions.phpの一番下に「swiper.min.js」呼び出しコードを書く。これもファイルパスが違う場合は変更しておく。

ここまでで準備が完了したので、ここからSwiperの本体データを設置する。

Swiper本体のコードを任意の場所に記入

下記のコードが本体になるから、記事なりウィジェットのカスタムHTMLなりの好きなところに貼り付けると動く。

 



本体コード解説

Sponcerd


本体コードの中のここが画像とかタイトル、リンク部分なので、内容を変更することで自分のウェブサイトに当てはめられる。

本体コードの中のここでスライダーの動きを制御している。

  • loop: true, 回転する
  • slidesPerView: 3, 画面内のスライド表示数3枚
  • spaceBetween: 5, スライドの間の隙間(px)
  • centeredSlides : false, メインスライドを中心に表示するか左に寄せるか
  •  autoplay: 自動再生
  • delay: 2000, 2秒ごとにスライドを動作
  • disableOnInteraction: false, ユーザーが触れても自動再生を停止しない
  • breakpoints: { 767 767px以内の場合は以下に変更
  • slidesPerView: 2, 画面内のスライドの表示数2枚
  • spaceBetween: 5  スライドの間の隙間(px)

最後にスタイルシートで少し微調整して終わり。

まとめ

俺もよく理解していない状態で手探りで進めてなんとか動くようになった程度だ。コードの内容とかには無駄がたくさんあると思うんだけど、初心者向けに解説してるサイトが全然なくて道入に超苦戦したから、初心者でも導入できる感じで解説した。

Swiperはいくらでも調整できる自由度が売りで、出来ることが多すぎるから逆にどこから手を付けていいのかわからない。というかどういう項目を追加したらどうなるのかが全然わからないから苦戦する。

Swiperの公式サイトにはdemoっていうページにたくさんのスライダーデモと一緒にコードが表示されているから、気に入ったスライダーがあればそのコードを試行錯誤しながら足したり引いたりして欲しい。カルーセルスライダーだって作れる。

そうすることで理想とするスライダーが出来上がるはずだ。検討を祈る。

ライフハック まとめ

2018/10/4

【2018年版】生活が変わる!ガジェマガ式買ってよかったモノ18選

いよいよ一人暮らしも5年目に突入しようとしていて、欲しいモノは一通り買ってしまった。これからも物欲は尽きることないだろうし、ガジェットに限らず様々な物を購入することになると思うけど、今後は足りないものを補うというより、今あるものをグレードアップする買い物が主流になると思う。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 そんな満たされた生活の中でも、俺基準俺調べの買ってよかった商品を、生活に与えたインパクト順にランキング形式でを紹介したい。正直もっと早く買っておけば良か ...

ReadMore

中国スマホ スマホ・タブレット

2018/10/20

【Poco F1】水冷搭載!最高性能で最安のゲーミングスマホ誕生

Androidスマホを牽引する最高ランクのCPUといえばSnapdragon845であることは周知の事実だと思うけど、とんでもないスマホが最安値を更新したから興奮を伝えたい。 そもそもSnapdragon845搭載スマホと言えばGalaxyS9やXperiaXZ3など、最低でも8万円以上払わないと手に入らない、というのは昔の話で、中国OPPOと中国Xiaomiが熾烈な価格競争を繰り広げたことで、Xiaomi Mi Mix 2Sが46,000円で購入できるところまで来た。 しかし今回はそれを上回る。立役者は ...

ReadMore

お得情報 スマホ・タブレット

2018/8/21

【ZenFone5Zが2万円も安い!】中国版Amazonの「GEAR BEST」が要チェックや!!

GEAR BESTって知ってるだろうか。簡単に言うと中国のAMAZONなんだけど、日本への進出も着々と進めていて、最近では日本倉庫まで作ってしまった通販会社だ。AMAZONも楽天もあるなかで更に通販会社の選択を増やす必要があるのだろうかという疑問を抱く気持ちはよく分かるんだろうけど、GEAR BESTには独自の魅力がある。今日はGEAR BESTが同魅力的なのか、具体的に製品を列挙しながら解説したい。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 GEAR BESTの魅 ...

ReadMore

ライフハック まとめ

2018/8/22

【2018年版】一人暮らしを効率化するために買ってよかったおすすめグッズ13選

一人暮らしは時間効率との戦いだ。8時間睡眠をとって、9時間働いて、2時間通勤するだけで19時間だ。信じられないかもしれないけど1日は24時間だから、残りは5時間しかない。この5時間をいかに解放するかが一人暮らしの課題だ。 本日もガジェマガ(@Gadgetkaeru)をご覧いただきありがとうございます。 一人暮らしに家事を分担できる相手はいない。ご飯を作ってくれる人もいなければ看病してくれる人もいない。いや人によってはいるかもしれないけど、大半の世の一人暮らしは恵まれない人間関係の中でたくましく生き抜くこと ...

ReadMore

格安SIM スマホ・タブレット まとめ

2018/10/18

【2018年版】格安SIMとセットで安いスマホのおすすめ15選!

格安スマホの完成度が高くなることで、敢えてキャリアスマホを選ぶ必要が無くなってきている。 次は格安スマホを購入しようと考えている人は多いと思うんだけど、そこで悩むのがどの通信会社と契約するかだ。キャリアに縛られない格安スマホを購入するのであれば月額費用も安く抑えたい。 そんな需要に応えるべく最近は格安SIMと格安スマホのセットがかなりお買い得になっている。回線も安いのに、セットで購入すればスマホも安い。今回は格安SIMとセットで安く購入できるスマホのおすすめランキングを作成した。 本日もガジェマガ(@Ga ...

ReadMore

LINE@で更新情報をお届け

LINE@を友達追加

  • この記事を書いた人
  • 最新記事

ガジェマガ(中の人)さん

奈良出身渋谷区在住の32歳会社員。ヘッダーの鹿は奈良愛の象徴。小学校でポケモンとハイパーヨーヨーにハマり、中学校でマジックザギャザリング、高校でPS2、そして大学でスマホに取り憑かれたオタク。今では立派なスマホ依存症。嫌いなものはパリピと邦画。ふざけた文章書くのが大好きな大人になり切れない大人。更新情報や日々の雑感をツイッターで呟いています。よければ下のツイッターマークからフォローしてください。喜びます。

-ブログPV・アクセス

Copyright© ガジェマガ , 2018 All Rights Reserved Powered by AFFINGER5.