sorane
@sorane

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

swiperが動かない。。。

解決したいこと

wordpressでswiperを使って、画像をスライドさせたいです。
CDNで読み込みたいです。

発生している問題・エラー

該当ページのconsoleをみたところ、なにもエラーを吐いていませんでした。

自分で試したこと

  • headタグにコピペ (header.php)
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  <script href="<?php echo get_template_directory_uri(); ?>/js/slider.js"></script>
  • html,css,jsをこちらを参考にコピペ
        <div class="swiper">
          <!-- 必要に応じたwrapper -->
          <div class="swiper-wrapper">
            <!-- スライド -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          </div>
        </div>
.swiper--wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 300px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 300px;
  text-align: center;
}

.swiper-slide:nth-child(3n + 1) {
  /*1、4、7、3n+1枚目の背景色 */
  background-color: #de4439;
}

.swiper-slide:nth-child(3n + 2) {
  /*2、5、8、3n+2枚目の背景色 */
  background-color: #fcd500;
}

.swiper-slide:nth-child(3n + 3) {
  /*3、6、9、3n+3枚目の背景色 */
  background-color: #53c638;
}

slider.js↓

const swiper = new Swiper(".swiper", {
});
  • slider.js は、アラートをつけて、読み込めているか確認しました。

結果

cssもhtmlも表示はできているようですが、ひっぱても画像が全く変わりません。
スクリーンショット 2022-10-06 2.37.15.png

回答よろしくおねがいします。

0

3Answer

headタグにコピペ (header.php)

以前に JavaScript の読み込み順に関して @sorane さんの質問に回答させて頂いたことがありますが、もしや今回も同様の理由だったりしないでしょうか?
<head> タグで slider.js を読み込んでおり、なおかつ DOMContentLoaded 等を用いたロード待ちをしていないなら <div class="swiper"> が生成される前に new Swiper(".swiper") が実行されているのだと思います。

該当ページのconsoleをみたところ、なにもエラーを吐いていませんでした。

ちなみに、どうやら new Swiper(".swiper") は指定したDOM要素が見つからなくてもエラーを出さないみたいですね。

0Like

Comments

  1. @sorane

    Questioner

    以前もありがとうございます!
    無事動きました!
    jsを読み込むときはswiperよりも下にすればいいと書いてあったのですが、それだけでは足りなかったのですね。ありがとうございます!

header.phpに追記したscriptタグの属性名をよく確認して下さい。

header.php
---   <script href="<?php echo get_template_directory_uri(); ?>/js/slider.js"></script>
+++   <script src="<?php echo get_template_directory_uri(); ?>/js/slider.js" defer></script>   

0Like

Comments

  1. @sorane

    Questioner

    回答ありがとうございます!
    srcに変更し、無事動きました!
    ありがとうございました!

お二人の回答によって、無事動きました。ありがとうございました。

0Like

Your answer might help someone💌