お二人の回答によって、無事動きました。ありがとうございました。
Like!
swiperが動かない。。。
Q&AClosed
解決したいこと
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も表示はできているようですが、ひっぱても画像が全く変わりません。
回答よろしくおねがいします。
0
3Answer
0
headタグにコピペ (header.php)
以前に JavaScript の読み込み順に関して @sorane さんの質問に回答させて頂いたことがありますが、もしや今回も同様の理由だったりしないでしょうか？
<head> タグで slider.js を読み込んでおり、なおかつ DOMContentLoaded 等を用いたロード待ちをしていないなら <div class="swiper"> が生成される前に new Swiper(".swiper") が実行されているのだと思います。
該当ページのconsoleをみたところ、なにもエラーを吐いていませんでした。
ちなみに、どうやら new Swiper(".swiper") は指定したDOM要素が見つからなくてもエラーを出さないみたいですね。
Like!
Comments
@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>
Like!
Comments
@sorane
Questioner回答ありがとうございます！
srcに変更し、無事動きました！
ありがとうございました！