「Swiper」の矢印ボタンとページネーションの色を変更する方法

スポンサーリンク

ホームページに自動再生のスライドショーを設置する機会があったため、レスポンシブ対応の「Swiper」を実装しました。
Autoplayのデフォルトデザインでは、prev/nextのボタンは青色、ページネーションの●も青色で、そのままではサイトのイメージにマッチしません。(ホームページはピンク系なので)

では、ボタンとページネーションの色を変更したいとき、スタイルシートのどこを書き換えればいいのか。実際にカスタマイズしてみたので、その方法を書きたいと思います。

本体のダウンロードがまだの方は、こちらからどうぞ。
http://idangero.us/swiper/

(注:「Swiper」(スライドショー)の設置方法は、多くのクリエイターさんたちがブログで記載しているので、ここでは割愛します。一番分かり易い記事を書いてくださっていたのが、以下のブログ記事になりますので参考にしてみてください)

おすすめ参照ページ「swiper.js使ってみたからそのオプションについて」
http://reiwinn-web.net/2016/11/30/swiper-js-01/

カスタマイズのビフォーアフター

ボタンやら色やらの変更方法を説明する前に、ビフォーアフターをご覧ください。

before

デモサイトにあったものをスクショしました。
薄いグレーの枠が画像サイズです。矢印もページネーションも、画像の上に表示されます。

after

矢印の画像とページネーションの色、表示位置を変更しました。
どちらも画像の外側に表示されるようにしてあります。

と、このように変更できますので、その方法をご紹介していきますね。

prev/nextの矢印ボタンを変更する

最初、この矢印はテキストかと思いました。
実際は画像を読み込んでいるので、お好きな素材屋さんでオシャレなボタンを調達して画像を差し替えれば、かなりイメージが変わると思います。

では先ず、以下にあるswiper.cssの中身をご覧ください。これを使って説明します。
https://github.com/nolimits4web/Swiper/blob/master/dist/css/swiper.css

swiper.cssで矢印ボタンについての記述がある箇所は、上記urlの117行目~166行目の部分になります。

■prevボタンの画像は、139行目~144行目で設定されています。
この中の青色prevボタンの画像を読み込む記述は、141行目。
background-image: url(“data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%20viewBox%3D’0%200%2027%2044’%3E%3Cpath%20d
%3D’M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0
%2C22L0%2C22L0%2C22z’%20fill%3D’%23007aff’%2F%3E%3C%2Fsvg%3E
“);

このurlで表示される画像をブラウザで見てみると、下の青い矢印が出てきます。

なので、この太字の部分を、差し替える画像のurlに修正します。

■nextボタンの画像は、153行目~158行目で設定されています。
この中の青色nextボタンの画像を読み込む記述は、155行目。
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D’http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg’%20viewBox%3D’0%200%2027%2044’%3E%3Cpath%20d
%3D’M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27
%2C22z’%20fill%3D’%23007aff’%2F%3E%3C%2Fsvg%3E
);

このurlで表示される画像をブラウザで見てみると、下の青い矢印が出てきます。

なので、この太字の部分を、差し替える画像のurlに修正します。

表示する矢印画像のサイズや位置を調整する必要があるときは、118行目~132行目のうちの該当部分を修正します。
実際にブラウザで確認しながら微調整していくと良いです。

ページネーションの色を変更する

スライダーで用いる画像が5枚のとき、●●●●●と画像の枚数分●で表示される部分です。
ここの色を変更する際は、217行目~220行目の.swiper-pagination-bullet-activeの部分の、219行目にある
background: #007aff;
この太字のカラーコードを、変更したい色に書き換えればOKです。

●のサイズはデフォルトで8pxになっています。(194行目のwidth、195行目のheight)
サイズを変更したいときは、ここを修正します。

画像に枠をつけたい場合は

<style>
.swiper-slide img {
border: double 5px #ccc;}
</style>

のように、htmlのheader内に記述します。

追記:矢印とページネーションを画像の外側に表示したい場合は

(2017.9.20追記:コメントの回答です)

htmlのheader内に、

<style>
.swiper-container {
width: ***; /* ここに画像表示サイズの横幅 */
height: ***; /* ここに画像表示サイズの高さ */
padding-bottom: 25px; /* 画像下の余白調整(25pxじゃなくてもいいです) */
}
.swiper-slide {
text-align: center;
}
</STYLE>

を付け足して、調整すれば大丈夫かと思います。
横幅は、Swiperを表示するボックスの幅から、<>のサイズを引いた値より小さくなるようにするとよいです。
画像下部の余白は、ページネーションのサイズより大きく設定すれば、ページネーションの上に画像がきます。

<>とページネーションを外に出す、と言うより、<>とページネーションの中に画像が入るように調整する、と考えるとしっくりくると思います。
お試しください。

スポンサーリンク

この記事をシェアしますか?

コメント

  1. pon より:

    はじめまして。
    Swiperを学ぼうとしている者です。
    このサイトを拝読させていただきました。

    教えていただきたいのは、<>とページネーションを外出しにされてますよね。
    コレをどの様にすれば設定できるのか、ご教示願えませんでしょうか?

    私が今製作してるサイトでは、画像3枚貼りでレスポンシブにしようとしています。
    画像3枚は小さめで、左右に<>を外出しにしてちょうど画面幅にしようと思っていますが、どうにもうまくいきません。

    どうか、外出しにする方法をご教示お願い致します。

    • 雅@管理人 より:

      はじめまして。
      閲覧ありがとうございます。

      < >とページネーションを画像の外に出す方法は、
      記事内に追記しましたので、そちらを参照して試してみてください。
      完成できるといいですね!

  2. pon より:

    早々にご教示ありがとうございました。
    まさか当日に教えて頂けるとは。感謝致します。m(_ _)m

    おかげ様で、矢印の内側に画像を押し込む事が出来ました。

    ただ、3枚貼りにすると、3枚の前後の画像の端が<>の下に見えてしまい、paddingと画像間の隙間設定で調整して、何とか見えなくしましたが、難しいもんですね〜。(^^;;

    隙間を大きくすると、3枚の画像の内、どうしても左右の画像が中央の画像から離れて行くので見栄えが悪いのと、相対的に<>が左右の画像に近いので、もう少し頑張って調整して参ります。

    ※お願い※
    名前に実名書いてしまいました。
    できましたら、ハンドル名に修正して頂きたく。m(_ _)m

    • 雅@管理人 より:

      ご報告ありがとうございます。

      横並びに3枚だったんですね…すみません、中央に1枚ずつのスライド×3枚かと。
      あまり役に立たないレスになってしまいましたね。失礼しました(汗)
      見え方を確認しながら微調整するのが一番ですね。
      あともう少しのようなので、完成を祈ります!

      ps.お名前修正しておきました。

      • pon より:

        いえ、考え方を纏めるのに大変役に立たました。
        ありがとうございました。
        地道に調整してみます。

        名前修正ありがとうございました。(^^)

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA