swiperが動かない【WordPress】

こんにちは　FULL Web Designの渡邊です。

JSのスクリプトでswiperを使って、作りたいものがあったので１から入れてみました。

しかし、動かなかったので、ここに記録します。

swiper公式

普通に入れ込んだが動かなかった

問題は、読み込む場所だった。

cssはヘッダで読み込み

JSと設定のコードはフッターで読み込ませると動いた。

参考

【実装例あり】スライダーSwiper.jsの基本的な使い方、機能解説

ページネーションの矢印をはみ出させたい

navigation={{
    prevEl: "{CSSセレクタまたはHTML要素}",
    nextEl: "{CSSセレクタまたはHTML要素}"
}}

この部分を記載すると、そこが矢印になる

標準の囲みだと、hiddenではみ出させれない。

https://komari.co.jp/blog/14235/#i-3

矢印の色を変えたい

.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #ff2911; //ここに変更する色を指定
}

参考

https://into-the-program.com/swiper-change-color-left-and-right-arrows/

その他ポイント　ブレークポイント

breakpoints: { // ブレークポイントこっちがPC
    737: { // 画面幅1025px以上で適用
    slidesPerView: 'auto',
    //slidesPerView: 2,
      //spaceBetween: 0, // スライド間の余白（px）
    
  }

ブレークポイントでスマホPCを分けるが、この設定はこっからPCということだった。

最初逆でやってた。

以上

ホームページ制作ならFULL ウェブデザインにお任せ下さい。

開業１２年以上の経験で、あなたのビジネス・サービスをインターネット上で認知されるお手伝いをいたします。

グラフィックデザインは２０年以上の経験ですので、シンプルかつ、いい感じにホームページを制作いたします。

お気軽にお問い合わせください。

初回お問い合わせは、メールにてお願いいたします。

お問い合わせフォーム