スライダーを作成してくれる有名なプラグインには現在３つある。
Slick(スリック)、Swiper(スワイパー)、Splide(スプライド)。
今回はSwiperに関してメモをしていく。
このプラグインはjQueryを必要としないので、jQueryが使用できない環境でも使うことが出来る。
ただ、容量が大きい。
swiper CDN を利用するか否か
スワイパーの公式ページ に飛んで、「始めましょう」を押す。
スワイパーを使うには、以下の3つの方法がある。
- NPMを利用する方法
- CDNを利用する方法
- ファイルをプロジェクト内に置く方法
NPMとは、「Node Package Manager 」の略で、Node.jsのパッケージ管理ツールのこと。
第三者が作ったプログラムパッケージを管理することができるとのこと。
今回は使用しない。
CDNは、「Contents Delivery Network」の略で、Webコンテンツをユーザーに配信するためのネットワークのこと。
Webコンテンツを利用するときにサーバーにアクセスする。
今回はファイルをダウンロードしてきてカスタマイズする方法をとる。
理由は、バーションアップ時にうまく表示されない等のトラブルもあるらしいからだ。
実装までの手順
jsファイル と cssファイル をダウンロードしプログラム内に配置する。
CDNを利用する場合はこの前準備は必要ない。
前準備 cssファイル と jsファイル と をダウンロードする。
公式サイトの左側にあるリンク「アセットをダウンロードする」を押す。
ダウンロードサイトへの飛び、黒画面の下の「ファイル」のタブを押してファイルを表示する。
以下のjsファイル と cssファイルをダウンロードする。
- swiper-bundle.min.js
- swiper-bundle.min.css
ダウンロードの仕方は、以下の通り。
1) 左側のファイル名をクリックしてファイルの中を表示させる。
2) 右クリックして「名前を付けて保存」を選択し保存する先を指定して保存する。
保存先は、jsファイルが格納されているフォルダーとcssファイルが格納されているフォルダーが良い。
HTMLファイルに cssファイルとjsファイルを読み込むコードを書く
ダウンロードしてきたファイルを htmlファイルが読み込めるようにする。
cssファイルの読み込ませ方
HTMLファイルの<head>部分に下記のコードを書きこむ。
自作したcssを上書きして意図しない意匠にならないよう、先に Swiper の css を先に書く。
「reset.css」を利用するときは、一番最初に「reset.css」を読み込ませる。
Scssを利用する場合は読み込む1つのファイルにまとめてしまった方が分かりやすい。
<!-- swiperのセット読込 swiper -->
<link rel="stylesheet" href="./asset/css/swiper.min.css" />
<!-- 自作 スタイルシートの読込 -->
<link rel="stylesheet" href="./assets/css/style.css" />CDNを使う場合
ダウンロードサイトへの飛び、黒画面の「インストール」の中のコードをHTMLファイルの<head>部分にコピーする。
必ず、サイトで最新のコードをコピーすること。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css">jsファイルの読み込ませ方
「jsを書く場所は body の閉じタグの直前」 とされている。
理由は、文章や画像、ボタンなどの部品が読み終わってからJavascriptを読み込まないとうまく紐づかないから。
でも、Javascript だけ離して書いていると忘れてしまうかもと不安になるので、「defer」をつけて遅延読込するようにしてhead の直前に書くことにする。
自作したjsを上書きして意図しない動きにならないよう、先に Swiper の js を先に書く。
<!-- swiper.jsのセット読込 -->
<script src="./assets/js/swiper.min.js" defer></script>
<!-- 自作 js の読込 -->
<script src="./assets/js/script.js" defer></script>CDNを使う場合
ダウンロードサイトへの飛び、黒画面の「インストール」の中のコードをHTMLファイルの<head>部分にコピーする。
必ず、サイトで最新のコードをコピーすること。
<script src="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.js"></script>WordPress への読み込み
function.php に書き込む
// swiper の読み込み
wp_enqueue_script('swiper', get_template_directory_uri() . '/assets/js/swiper-bundle.js', array('jquery'), filemtime(get_theme_file_path('assets/js/swiper-bundle.js')), true);Swiper の 定型タグを 自分の htmlファイル に埋め込む。
必要のない部品は消す。
<!-- Swiper という装置が入っているコンテナ (※クラス名は変更可能)-->
<div class="swiper">
<!-- スライドさせるコンテンツを入れるコンテナをいれるコンテナ -->
<div class="swiper-wrapper">
<!-- スライドさせるコンテンツを入れるコンテナ -->
<div class="swiper-slide">スライドさせるもの1</div>
<!-- スライドさせるコンテンツを入れるコンテナ -->
<div class="swiper-slide">スライドさせるもの2</div>
<!-- スライドさせるコンテンツを入れるコンテナ -->
<div class="swiper-slide">スライドさせるもの3</div>
</div>
<!-- ページネーション (※省略可) -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン (※省略可) -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロール (※省略可) -->
<div class="swiper-scrollbar"></div>
</div>jsファイルで初期化を行う
jsファイルに以下のコードを書く。
const swiper = new Swiper('.swiper', {
// 表示設定
loop: true,
speed: 500,
effect: "coverflow",
// ページネーション
pagination: {
el: '.swiper-pagination',
},
// Navigation の矢印ボタン
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// スクロールバー
scrollbar: {
el: '.swiper-scrollbar',
},
});CSS のコード
/* swiper の大きさを設定 */
.swiper {
max-height: 80%;
aspect-ratio: 16/9;
}
コメント