完成イメージ
Swiper を使う
Web サイトなどでよく使うパーツはライブラリなどで配布されていないか調べてみると良いです。トレンドがあるので、なるべく新しく人気のあるものを使用しましょう。今回は Swiper を使ってみます。
参考
| Swiper | スライドのみの場合は最近こちらを採用します https://swiperjs.com/ |
| Slick | 多機能でカルーセルをつくるときはこちらを採用することも https://kenwheeler.github.io/slick/ |
| bxSlider | 以前はよく使っていましたが、最近はアップデートもなくなり役割を終えたのかも https://bxslider.com/ |
教材
github のグリーンの code ボタンからダウンロードしてください。
01. まずはさわってみよう
Swiper のチュートリアルに従って、そのままつくってみよう。
HTML の <head> タグ内に下記を追記します。
※ css/style.css よりも上の位置
これは Swiper を読み込む指定になります。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>https://swiperjs.com/get-started#use-swiper-from-cdn
HTML の <body> タグ内に下記を追記します。
※ js/slide.js よりも上の位置
これはスライド本体のタグになります。
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>https://swiperjs.com/get-started#add-swiper-html-layout
CSS ( css/style.css ) に下記を追記します。
これによりスライドのサイズを指定しています。
.swiper {
width: 600px;
height: 300px;
}https://swiperjs.com/get-started#swiper-css-styles-size
JavaScript ( js/slide.js ) に下記を追記します。
Swiper の初期化処理となります。
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});https://swiperjs.com/get-started#initialize-swiper
02. 写真素材の加工
スライドにあわせて写真のサイズは統一しておこう。
今回は 1920 × 750 px にサイズ調整してあります
Web で公開するので、ファイルサイズはなるべく小さくしよう。
Photoshop などで調整しても良いし、Squoosh も便利。
実際に調整して、どのくらい小さくなったか確認してみよう。
01 で使用したチュートリアルの HTML にあるスライド部分を用意した画像に置き換えてみよう。
※ <div class=”swiper-wrapper”> タグ内
<div class="swiper-slide"><img src="images/slide-01.jpg"></div>
<div class="swiper-slide"><img src="images/slide-02.jpg"></div>
<div class="swiper-slide"><img src="images/slide-03.jpg"></div>
<div class="swiper-slide"><img src="images/slide-04.jpg"></div>
<div class="swiper-slide"><img src="images/slide-05.jpg"></div>チュートリアルのままだと画像がズレるので CSS もあわせて調整します。
01 で使用した .swiper の指定も書き換えます。
.swiper {
width: 960px;
height: 375px;
}
.swiper-slide img {
width: 100%;
}03. アレンジする
そのままではちょっと物足りないので、アレンジしてみよう。
まずは Swiper の機能でできることから。
Swiper のオプション指定は JavaScript で行います。
- 横移動に変えたい ( direction )
- ページネーション ( スライド下のドットのナビゲーション) をクリックでもスライドさせたい ( pagenation → clickable )
- 自動的に再生させたい ( autoplay )
- 速度を調節したい ( スライド時間は speed / 停止時間は autoplay → delay )
- クロスフェードに変える ( effect )
最終的な JavaScript はこのようになります。
※実際に試すときはひとつずつ確認しながら進めましょう
const swiper = new Swiper('.swiper', {
// direction: 'vertical', // コメントアウトして縦スライドをやめて横スライドに
loop: true,
// アニメーション間隔を調整(フェードの時間) ミリ秒単位
speed: 800,
// If we need pagination
pagination: {
el: '.swiper-pagination',
// ページネーションをクリックでスライド
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
// 自動再生
autoplay: {
// スライドの表示間隔(アニメーションも含めた表示時間) ミリ秒
delay: 3000,
},
// スライドアニメーションをフェードに指定
effect: 'fade',
});
サイズもブラウザ幅に追従するように変えてみます。
CSS は 02 で使用した .swiepr の指定を下記のように変更しましょう。
// 画面幅に合わせる
.swiper {
width: 100%;
height: auto;
}最近よくあるパターン
ただ画像を再生するだけで操作させないパターンが多い。
CSS や JavaScript を参考にしてみてください。