###前提・実現したいこと
swiperを使用してスライダーを実装したのですが、クローム環境だと時々リンク先に飛ばないバグ?が起きてしまいます。
preventClicks: false,
preventClicksPropagation: false,
上記を入れればリンク先に飛ぶようになるのですが、スライドさせたいだけの場合もリンク先に飛んでしまいます。
そのため、別途JSで記述して飛ばすようにしようと思うのですが、記述で詰まってしまったのでどなたかお教えいただけると助かります。
↓の記述だと画像をクリックしても何も起きません…
###JavaScript
$(function(){ //Swiper の設定 var mainSwiper = $('.swiper-container').swiper({ pagination: '.swiper-pagination', paginationClickable: true, spaceBetween: 30, loop: false, // preventClicks: false, // preventClicksPropagation: false, }); //スライド画像をクリックでリンク先へ飛ぶ $('.swiper-container a').on('click', function(event) { event.preventDefault(); if ($('.swiper-slide').hasClass('swiper-slide-active') === false) { if($(this).attr('target') !== undefined){ window.open($(this).attr('href'),$(this).attr('target')); }else{ window.location.href = $(this).attr('href'); } } }); });
HTML
1<div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide"><a href="example.com"><img src="/example1.jpg" alt="画像1"></a></div> 4 <div class="swiper-slide"><a href="example.jp"><img src="/example2.png" alt="画像2"></a></div> 5 <div class="swiper-slide"><a href="example.co.jp"><img src="/example3.jpg" alt="画像3"></a></div> 6 </div> 7 <div class="swiper-pagination"></div> 8</div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/24 00:57