2023.7.31 追記
Swiper のアップデート によりこのページのスライダーが正常動作しなくなっていますが、このページは2年以上前に行った検証の記録なので、スライダー動作の修正等を行っていません。
- 【1】picture タグと WebP 形式の画像を使っている例 https://lightning-g3.hp1.work/swiper-slider/
⇒ 【4】【1】に img タグに width/height を追加した例 https://lightning-g3.hp1.work/swiper-slider-4/
⇒ 【6】【1】に swiper-container の height を追加した例 https://lightning-g3.hp1.work/swiper-slider-6/ - 【2】img タグを使っている例 https://lightning-g3.hp1.work/swiper-slider-2/
- 【3】picture タグと WebP 形式の画像を使っている例 https://lightning-g3.hp1.work/swiper-slider-3/
1200px以上でも slidesPerView:1 にしてある。一瞬スライド画像が大きく表示されるのがイヤならこれがよい。
⇒ 【5】【3】に img タグに width/height を追加した例 https://lightning-g3.hp1.work/swiper-slider-5/ - 【参考】HTML で作成した例 https://uonuma.biz/responsive/swiper.js/
画像の出し分け
img タグに width/height を追加している。
スライドのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。
<picture>
<source type="image/webp" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.webp">
<source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
<source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
<source type="image/jpeg" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.jpg">
<source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
<img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者" width="400" height="233">
</picture>
カルーセルのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。
<picture>
<source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
<source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
<source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
<img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者" width="400" height="233">
</picture>
新着情報
サブメニューを開く親項目のリンクを無効にしたスマホ対応のカスタマイズ
2024年10月24日
日付ではなく年と月で範囲を指定して検索するカスタマイズ例
2024年8月28日
タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例
2024年1月24日
VK 投稿リストでカスタム分類のタームを親→子の順に表示した例
2023年7月23日
個々の記事ごとに Google 広告の表示・非表示を切り替えるカスタマイズ事例
2023年6月13日