WordPress上でJqueryのbxsliderをカスタマイズして、サムネイル付きのカルーセル型のスライドショーを作成しています。
PCでは問題ないのですが、Iphoneなどのスマホで左右にスライドさせるのコントロールがうまく動作せず、フリーズしてしまいます。。
Chromeのデベロッパーツールで下記のようなエラーが表示されます。
発生している問題・エラーメッセージ
Uncaught TypeError: slider_smt1_1.goToSlide is not a function at Object.onSlideNext (slider.js:70) at n.fn.init.el.goToSlide (jquery.bxslider.js:1037) at n.fn.init.el.goToNextSlide (jquery.bxslider.js:1110) at HTMLAnchorElement.clickNextBind (jquery.bxslider.js:629) at HTMLAnchorElement.dispatch (jquery.min.js:3) at HTMLAnchorElement.r.handle (jquery.min.js:3) onSlideNext @ slider.js:70 el.goToSlide @ jquery.bxslider.js:1037 el.goToNextSlide @ jquery.bxslider.js:1110 clickNextBind @ jquery.bxslider.js:629 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3
該当のソースコード
php
1 <div class="slide"> 2 <div class="sliderBox sliderBox1"> 3 <?php $args = array( 'posts_per_page' => 5, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post', 'category' => '4' ); ?> 4 <?php $myposts = get_posts( $args ); foreach ( $myposts as $key=> $post ) : setup_postdata( $post ); ?> 5 <div class="innerBox"> 6 <p class="img"><?php the_post_thumbnail('medium'); ?></p> 7 <div class="txtBox"> 8 <h4><?php the_title(); ?></h4> 9 <p class="txt"><?php the_excerpt(); ?></p> 10 <p class="btn"><a href="<?php the_permalink(); ?>">more</a></p> 11 </div> 12 </div> 13 <?php endforeach; wp_reset_postdata();?> 14 <!--/sliderBox--> 15 </div> 16 <div> 17 <ul class="thumbBox thumbBox1"> 18 <?php $myposts = get_posts( $args ); foreach ( $myposts as $key=> $post ) : setup_postdata( $post ); ?> 19 <li><a data-slide-index="<?php echo $key; ?>" href="#"><span><?php the_post_thumbnail('thumbnail'); ?></span></a></li> 20 <?php endforeach; wp_reset_postdata();?> 21 </ul> 22 </div> 23 <!--/slide--> 24 </div>
javascript
1 var replaceWidth = 768, 2 winW, 3 winH, 4 widthFlag; 5 6 //■ デバイス判定 7 $(window).on('load resize', function() { 8 9 winW = $(window).width(); 10 winH = $(window).height(); 11 12 if(winW <= replaceWidth && widthFlag !== 'smt') { 13 widthFlag = 'smt'; 14 } else if(winW > replaceWidth && widthFlag !== 'pc') { 15 widthFlag = 'pc'; 16 } 17 }); 18 19 20 //*******************************************************************// 21 var optionPC = { 22 auto:false, 23 speed:700, 24 captions: false, 25 controls: true, 26 nextText: '', 27 prevText: '', 28 useCSS: false, 29 } 30 var optionSMT1 = { 31 auto:false, 32 speed:700, 33 captions: false, 34 controls: true, 35 nextText: '', 36 prevText: '', 37 useCSS: false, 38 } 39 var optionSMT2 = { 40 pager: false, 41 minSlides: 3, 42 maxSlides: 3, 43 moveSlides: 1, 44 slideWidth: 110, 45 slideMargin: 0, 46 } 47 48 function sliderPC(){ 49 var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'})); 50 var slider_pc2 = $('.sliderBox2').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox2'})); 51 var slider_pc3 = $('.sliderBox3').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox3'})); 52 var slider_pc4 = $('.sliderBox4').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox4'})); 53 var slider_pc5 = $('.sliderBox5').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox5'})); 54 var slider_pc6 = $('.sliderBox6').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox6'})); 55 var slider_pc7 = $('.sliderBox7').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox7'})); 56 } 57 58 59 function sliderSMT(){ 60 //1 61 var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{ 62 pagerCustom: '.thumbBox1', 63 onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt1_2.goToSlide(newIndex);} 64 })); 65 var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{ 66 onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}, 67 onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);} 68 })); 69 70 } 71 72 var timer = false; 73 $(window).load(function() { 74 75 if (timer !== false) { 76 clearTimeout(timer); 77 } 78 timer = setTimeout(function() { 79 if(widthFlag === 'smt') { 80 sliderSMT(); 81 } else if(widthFlag === 'pc') { 82 sliderPC(); 83 } 84 }, 500); 85 86 }); 87
試したこと
試しにベタなPHPをやめてベタなHTMLで動かしてみたところ、PC・スマホともうまく動作しました。
(デベロッパーツールでもエラーはありませんでした)
WordPress上ではうまくいかない理由が何かありそうでしょうか。。
どなたかお助けいただければ幸いです。m(__)m
<追記>
WordPressのjQueryが悪さしているかと思い、下記をheader.phpに記述してみましたがだめでした。。
うまくいっているベタなHTMLとうまくいかないWPからのHTMLを追記します。
<ベタなHTML>
html
1 <div class="slide"> 2 <div class="sliderBox sliderBox1"> 3 <div class="innerBox"> 4 <p class="img"><img src="images/test.png"></p> 5 <div class="txtBox"> 6 <p class="txt">1-1.テスト</p> 7 <p class="btn"><a href="#">more</a></p> 8 </div> 9 </div> 10 <div class="innerBox"> 11 <p class="img"><img src="images/test.png"></p> 12 <div class="txtBox"> 13 <p class="txt">1-2.テスト</p> 14 <p class="btn"><a href="#">more</a></p> 15 </div> 16 </div> 17 <!--/sliderBox--> 18 </div> 19 <div> 20 <ul class="thumbBox thumbBox1"><!-- 21 --><li><a data-slide-index="0" href="#"><span><img src="images/test.png" /></span></a></li><!-- 22 --><li><a data-slide-index="1" href="#"><span><img src="images/test.png" /></span></a></li><!-- 23 --></ul> 24 </div> 25 <!--/slide--> 26 </div>
<WPで処理した際のHTML>
html
1 <div class="slide"> 2 <div class="sliderBox sliderBox1"> 3 <div class="innerBox"> 4 <p class="img"><img width="213" height="300" src="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png 213w, http://my-domain.jp/wp-content/uploads/2018/01/test.png 690w" sizes="(max-width: 213px) 100vw, 213px" /></p> 5 <div class="txtBox"> 6 <h4>テスト5</h4> 7 <p class="txt">テスト本文5</p> 8 <p class="btn"><a href="http://my-domain.jp/test-2-2-2-2/">more</a></p> 9 </div> 10 </div> 11 <div class="innerBox"> 12 <p class="img"><img width="213" height="300" src="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png 213w, http://my-domain.jp/wp-content/uploads/2018/01/test.png 690w" sizes="(max-width: 213px) 100vw, 213px" /></p> 13 <div class="txtBox"> 14 <h4>テスト4</h4> 15 <p class="txt">テスト本文4</p> 16 <p class="btn"><a href="http://my-domain.jp/test-2-2-2/">more</a></p> 17 </div> 18 </div> 19 <!--/sliderBox--> 20 </div> 21 <div> 22 <ul class="thumbBox thumbBox1"> 23 <li><a data-slide-index="0" href="#"><span><img width="150" height="150" src="http://my-domain.jp/wp-content/uploads/2018/01/test-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></span></a></li> 24 <li><a data-slide-index="1" href="#"><span><img width="150" height="150" src="http://my-domain.jp/wp-content/uploads/2018/01/test-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></span></a></li> 25 </ul> 26 </div> 27 <!--/slide--> 28 </div>
回答2件
あなたの回答
tips
プレビュー