Swiper でスライダーとカルーセルを組み込んだ例② | Lightning G3 Pro / VK Blocks Pro のカスタマイズ、TIPS

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/

画像の出し分け

スライド、カルーセルのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。
どの画像を使うかはブラウザが判断する。

<img 
  srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/2ss.jpg 400w,
          https://lightning-g3.hp1.work/wp-content/uploads/2021/04/2s.jpg 640w,
          https://lightning-g3.hp1.work/wp-content/uploads/2021/04/2.jpg 1280w"
  src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/2ss.jpg" alt="働く若者">