📚

[swiper][tailwind]矢印を外側に配置した際に、PC版のみそれを表示したい。

2023/03/16に公開

下記リンクを参考にして、swiperで矢印を外側に配置しました。

https://labo.webis.co.jp/2021/12/swiper-outside/#:~:text=ポイントは、swiper-containerと,してあげればOK。

今回やりたいことは、それに加え矢印をPC版のみ表示したいです。

解決策

md:blockをafter要素でも記載することで実現できました。

<div
    class="swiper-button-prev hidden md:block absolute  left-0 -ml-20 after:content-[''] w-16 after:bg-no-repeat after:bg-contain after:md:block after:h-14 after:w-20 after:bg-[url(images/prev-icon.webp)]">
  </div>

Discussion