Swiper 初めての使い方　初心者

Swipe Slide を利用したいが動かない。

CDN で　CSS は読み込まれますが、JSは読み込まれないです。

試したこと① head　コードを記述しましたが、Jsが読み込まない。

試したこと②
因みに、Footer.php </body> 直前ににコードを記述したが、読み込まないです。

</footer> <?php wp_footer(); ?>     </body> </html>

試したこと③　Scripts.js に記述したが何も反応はないです。

新しくコードが変更されたので、指定のコードを入力しました。
https://swiperjs.com/get-started#use-swiper-from-cdn
Initialize Swiper
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});

Google コンソールで確認　swiper Js は表示されていますが　動かないです。
読み込みはされているけど動かないということですか？
どのように動くかも調べています。

何か参加に教えていただければと思います。

Lhankor_Mhy

2021/12/03 04:35

.swiper はHTMLにありますか？

kazOh

2021/12/03 04:36

はい。あります。

kazOh

2021/12/03 04:36

<div class="swiper">  <div class="swiper-wrapper">  <?php global $slider_posts; $slider_posts = array(); $slider = array( 'post_type' => 'post', 'meta_key' => 'show_in_slider', 'meta_value' => 'yes', 'posts_per_page' => 6 ); $the_query = new WP_Query( $slider ); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); $img_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); //元のサイズ（full）のサムネイルの URL を取得してリンクの href 属性に esc_url() でエスケープ処理して出力 ?> <div class="swiper-slide" style="background-image: url('<?php echo $img_url; ?>');"> <div class="slider_overlay"></div> <div class="swiper_slide_text"> <h3><?php the_title(); ?></h3> <p><?php echo dess_get_excerpt(120); ?></p> <p class="slide_read_more"><a href="<?php the_permalink(); ?>">READ MORE</a></p> </div> </div> <?php array_push($slider_posts, get_the_ID()); endwhile; endif; wp_reset_postdata(); wp_reset_query(); ?> </div>

kazOh

2021/12/03 04:36

２週間経っても悩んで調べています。。何がおかしいのか。大変です。

Lhankor_Mhy

2021/12/03 04:37

もしかすると、wordpress を使っていませんか？

kazOh

2021/12/03 04:38

はい。

行動規範の内容に同意します

回答1件

__因みに、Footer.php </body> 直前ににコードを記述したが、読み込まないです。 __

コメントを外してみてはどうでしょうか。

php
1<!--swiper js-->
2<!--<script src="<?php //echo get_template_directory_uri(); ?>/js/swiper-bundle.min.js" type="text/javascript"></script>-->
3<!--js/scripts-->
4<!--<script src="<?php //echo get_template_directory_uri(); ?>/js/scripts.js" type="text/javascript">-->
5
6# ↑↓
7
8<script src="<?php //echo get_template_directory_uri(); ?>/js/swiper-bundle.min.js" type="text/javascript"></script>
9<script src="<?php //echo get_template_directory_uri(); ?>/js/scripts.js" type="text/javascript"></script>
10