Q&A
JavaScriptの書き方に問題はありません。原因はHTMLかCSSか、またはSwiperのバージョンだと思います。
恐れ入りますが、出力後のHTMLとSwiperのバージョンをご提示いただけませんでしょうか？
前提・実現したいこと
wordpressでswiperを使ってカスタム投稿を2件づつ表示されるようにしたいと思っています。
カスタム投稿を表示させるphpを書くのとswiperをつけたのですが、画像の現状のように2件でなく1件だけ表示されてしまいます。
該当のソースコード
javascript
1var swiper = new Swiper('.slider02', { 2 navigation: { 3 nextEl: '.swiper-button-next', 4 prevEl: '.swiper-button-prev', 5 }, 6 pagination: { 7 //el: '.swiper-pagination', 8 //dynamicBullets: true, 9 }, 10 loop: true, 11 effect: 'slide', 12 speed: 1000, 13 slidesPerView: 2, 14 });
php
1 <section class="individual-related"> 2 3 <div class="individual-contents"> 4 5 <div class="swiper-container slider02"> 6 <div class="swiper-wrapper"> 7 8 <?php 9 global $post; 10 $args = array( 11 'numberposts' => 2, //2件表示 12 'post_type' => 'staff', //カスタム投稿タイプ名 13 'orderby' => 'rand', //スラッグで並び替え 14 'post__not_in' => array($post->ID) //表示中の記事を除外 15 ); 16 ?> 17 <?php $myPosts = get_posts($args); if($myPosts) : ?> 18 <?php foreach($myPosts as $post) : setup_postdata($post); ?> 19 <div class="swiper-slide"> 20 21 <div class="individual-flex"> 22 <div class="box-left"> 23 <a href="<?php the_permalink(); ?>"> 24 <?php if ( has_post_thumbnail() ): ?> 25 <?php the_post_thumbnail( array(130,130) ); ?> 26 <?php else: ?> 27 <img src="img/nowprinting.png" alt="nowprinting"> 28 <?php endif; ?> 29 </a> 30 </div> 31 <!--box-left--> 32 <div class="box-right"> 33 <p class="nam"><?php the_field('name'); ?></p> 34 <p class="aff"><?php the_field('affiliation'); ?></p> 35 </div> 36 <!--box-right--> 37 </div> 38 <!--individual-flex--> 39 </div> 40 <!--swiper-slide--> 41 <?php endforeach; ?> 42 <?php endif; wp_reset_postdata(); ?> 43 <!-- ループおわり --> 44 </div> 45 <!--swiper-wrapper--> 46 <div class="swiper-button-prev"></div> 47 <div class="swiper-button-next"></div> 48 </div> 49 <!--swiper-container--> 50 51 </div> 52 <!--individual-contents--> 53 54 </section>
HTML
1<section class="individual-related"> 2 <div class="individual-contents"> 3 <div class="swiper-container slider02"> 4 <div class="swiper-wrapper"> 5 <div class="swiper-slide"> 6 <div class="individual-flex"> 7 <div class="box-left"> <a href="https://URLが入ります/staff/%e3%82%b9%e3%82%bf%e3%83%83%e3%83%953"> 8 <noscript><img width="130" height="130" 9 src="https://URLが入ります/画像のパスが入ってますtest2-150x150.png" 10 class="attachment-130x130 size-130x130 wp-post-image" alt="" 11 srcset="https://URLが入ります/画像のパスが入ってますtest2-150x150.png 150w, https://URLが入ります/画像のパスが入ってますtest2.png 240w" 12 sizes="(max-width: 130px) 100vw, 130px" /></noscript><img width="130" 13 height="130" 14 src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20130%20130%22%3E%3C/svg%3E' 15 data-src="https://URLが入ります/画像のパスが入ってますtest2-150x150.png" 16 class="lazyload attachment-130x130 size-130x130 wp-post-image" alt="" 17 data-srcset="https://URLが入ります/画像のパスが入ってますtest2-150x150.png 150w, https://URLが入ります/画像のパスが入ってますtest2.png 240w" 18 data-sizes="(max-width: 130px) 100vw, 130px" /> </a></div> 19 <div class="box-right"> 20 <p class="nam">スタッフ3</p> 21 <p class="aff">所属が入ります。</p> 22 </div> 23 </div> 24 </div> 25 <div class="swiper-slide"> 26 <div class="individual-flex"> 27 <div class="box-left"> <a href="https://URLが入ります/staff/%e3%82%b9%e3%82%bf%e3%83%83%e3%83%951"> 28 <noscript><img width="130" height="130" 29 src="https://URLが入ります/画像のパスが入ってますtest1-150x150.png" 30 class="attachment-130x130 size-130x130 wp-post-image" alt="" 31 srcset="https://URLが入ります/画像のパスが入ってますtest1-150x150.png 150w, https://URLが入ります/画像のパスが入ってますtest1.png 240w" 32 sizes="(max-width: 130px) 100vw, 130px" /></noscript><img width="130" 33 height="130" 34 src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20130%20130%22%3E%3C/svg%3E' 35 data-src="https://URLが入ります/画像のパスが入ってますtest1-150x150.png" 36 class="lazyload attachment-130x130 size-130x130 wp-post-image" alt="" 37 data-srcset="https://URLが入ります/画像のパスが入ってますtest1-150x150.png 150w, https://URLが入ります/画像のパスが入ってますtest1.png 240w" 38 data-sizes="(max-width: 130px) 100vw, 130px" /> </a></div> 39 <div class="box-right"> 40 <p class="nam">スタッフ1</p> 41 <p class="aff">所属が入ります。</p> 42 </div> 43 </div> 44 </div> 45 </div> 46 <div class="swiper-button-prev"></div> 47 <div class="swiper-button-next"></div> 48 </div> 49 </div> 50</section>
css
1.individual-flex { 2 display: flex; 3} 4 5.box-left { 6 padding-right: 5%; 7} 8 9section.individual-related { 10 margin-top: 11%; 11} 12 13.individual-flex p.nam { 14 text-align: left; 15 padding-top: 5%; 16}
試したこと
swiperのslidesPerViewの値を1や4などにしてみましたが、意図した表示にはなりませんでした。slidesPerViewの値を1にしたときは、
スタッフの表示が1名になっただけでした。
ご連絡ありがとうございます。
swiperのバージョンは 4.1.6 です。
出力後のHTML追加いたしました。
よろしくお願いいたします。
HTMLに問題はないようです。バージョンが古すぎると思います。回答に移ります。
回答1件
0
ベストアンサー
v4.1.6は古すぎると思います。
以下のように最新v6.5.4なら2件表示されます。
https://jsfiddle.net/0tsw3o7k/
バージョンの変更をお試しになってみてはいかがでしょうか。
もし変更してもダメならCSSが原因ですので、お手数ですが改めてCSSをご提示いただけますと幸いです。
投稿2021/04/06 10:03
編集2021/04/06 10:07総合スコア50
回答ありがとうございます。バージョンを新しくしました。試したことの部分に現在の状態の画像を追加しました。スライドの矢印の送りボタンを押すと1回押すと表示させたい部分が消えます。３回ほど押すと１瞬出てきて消える状態になります。
別のもう一つのswiperのスクリプトを読み込んでいたようで、直した所、swiper最新バージョンの状態で２件表示されるようになりました。ありがとうございました。
あなたの回答
tips
プレビュー
