jsだけの話じゃないんだよね。
完成イメージ
現在は1つのページでデバイス別（ブラウザ幅別）にデザインを切り替えるのが当たり前になっている。PC・スマホは当然ながら、こだわってたらタブレット用も作ってたりする。
そういうのはcss内でやっていける。
そんな感じで、swiper.jsもブラウザ幅に合わせた設定の切り替えが可能になっている。
それはよくある話のだけど、スライドを使ったり使わなかったりの切り替えをしたい場合もある。
そういう話。
やっていく
ここを参考にする。
参考にすれば完璧。
だけど、もっと良くできる。
CSSの読み込み自体をレスポンシブ化
こうする。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" media="screen and (min-width:768px)" />レスポンシブ導入当初はPC/SPのcssをこんな感じで読み込ませるのがメジャーな感じだった。
懐かしいですね。
これの利点は、swiper.jsのjs部分だけでなくcssも無効化できる点にある。
参考記事だとcssを上書きすることで対処していたけど、上書きしたい対象がそもそも存在しなければいいじゃんね、という考え方。
上書きするならswiper.cssの影響がどこまで及んでいるかを理解していないと、なにか起きるかもしれない。上書きが漏れていて何かの拍子に何かが起きるかもしれない。それを避けられる。
もちろんリスクというかコストはあって、js・cssを書けばよかったのにhtmlも手を入れることになるという、1つの機能に対して手間が多くなるよねっていうやつ。
ガチガチに組むなら良いけど汎用性を持たせたいなら微妙。
ご利用は計画的に。
コメント