【Swiper.js】超便利!レスポンシブスライダーこんにちは、webの佐野です。年末の慌ただしい時期になってきましたが、皆様いかがお過ごしでしょうか。今回はタイトルにもある、超万能JSスライダーの【Swiper】を、簡単なカスタマイズと併せて紹介したいと思います。普段使っているスライダーがレスポンシブ対応されていなかったり、スライダープラグインがたくさんありすぎて何使えばいいかわからない!と言う方がいらっしゃれば、ぜひ一度使ってほしいプラグインです。最後にSwiperの特徴Swiperには下記の様な特徴があります。色々なスライダーがありますが、jQueryを使用していないプラグインは珍しいですね!Swiperは単独で動くので、競合などもなく導入しやすいプラグインとなっています。導入については、必要なファイルを読み込むだけで完了です。読み込み方法は以下の2つから好きな方を選んでください。・ダウンロードしたファイルを作業フォルダに設置して読み込む・CDNから読み込む今回はファイルをダウンロードしながら進めます。公式サイトからSwiperをダウンロードしましょう。Swiper公式サイトダウンロードしたら必要なファイルは以下の二つになります。・swiper.js・swiper.cssどちらも同梱されているminファイルでも可です。こちらを作業フォルダに設置して、htmlファイルで読み込みます。今回の作業フォルダは構成は以下の様にしています。・index.html・css/swiper.css・js/swiper.jsSwiperの実装では、さっそく実装していきたいと思います。先に実装後のイメージはこちらになります。CodePen.そしてこちらが、index.htmlの内容になります。コンテンツ1ここにテキストや画像など好きにコーディングしてください。コンテンツ2ここにテキストや画像など好きにコーディングしてください。コンテンツ3ここにテキストや画像など好きにコーディングしてください。</script></body></html>とっても簡単ですね!もちろんループやオートプレイと言ったスライダーに必要なオプションは一通り揃っているので要件に合わせて追加してください。こちらのサイトが細かくオプション等をまとめてくださっているので、参考までに共有しておきます。上の実装だけでも十分にスライダーなのですが、前後のボタンやページネーションがデフォルトのままで少し寂しく感じます。左右のスライドボタンはCSS側でデザインされているのでCSSを上書きしてデザインを変更します。ここでは別の画像に書き換えて対応します。</style>追記がCSSのみなので、CSSだけ記述しています。.swiper-button-prev.swiper-button-nextこちらのクラスを上書するだけなので簡単です!ページネーションの変更ページネーションについても同様に、CSSで円のサイズや色の変更ができます。これについては画像ではないので、画像等へデザイン変更する場合に少しコードを追加する必要があります。CodePen.今回は画像ではなく、aタグを使っていますが、下のコードでaタグを生成している箇所(76,78行目)にimgタグを指定すると画像で表示されます。SwiperはjQueryなど他のプラグインに依存せず単独で動くので本来必要ありませんが、ナビゲーションを変えるにあたり、処理の組み易さからここではjQueryを利用しています。コンテンツ1ここにテキストや画像など好きにコーディングしてください。コンテンツ2ここにテキストや画像など好きにコーディングしてください。コンテンツ3ここにテキストや画像など好きにコーディングしてください。</script></body></html>細々と変更点はありますが、初期実装されているページネーションを使用せずに、自作した様なイメージになります。大まかな変更箇所としては下記の4つです。・ページネーション用にスライドコンテンツ分の要素を用意する(白黒の要素)・用意した要素のレイアウトをCSSで整える・スライドイベント時にページネーションのアクティブが変更される様にイベントを設定する・ページネーション要素のクリック時にページネーションのアクティブが変更される様にイベントを設定するSwiperは何かアクションが起こった時にイベントが仕込めるよう、callback関数も豊富に用意されているので素敵です!スライドの開始位置を変更したい要件として少ないかもしれませんが、スライドの開始位置をデフォルト(1番左)から変更したいとなった場合の指定が見当たらなかったので、こちらも自前で処理を組みました。CodePen.コードがこちら。</script>変更点としては以下の3つです。・スライドスピードを0に変更(3行目)・slideToメソッドを使って指定したスライドまで移動(15行目)・スライドスピードを300(初期値)を変更(16行目)上の例では自作のページネーションを使用している為、初期のアクティブ要素を変更していますが(20行目)、標準機能を使用していれば何もする必要はありません。最後にレスポンシブ対応されており、パラメーターも豊富で何かと使い勝手が良いSwiperの紹介をさせていただきましたが、いかがでしたでしょうか?自作スライダーも良いですが、動作検証や拡張などを考えると時間が掛かりすぎてしまうなどネックな点が多いです。ZBr...2018/7/13メニューを閉じるCONTACTゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。