swiperが動かない。。。
Q&A
Closed
解決したいこと
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
