Swiperでスライド画像をクリックしたら次の画像に移りたい

Question

前提・実現したいこと

Wordpressのトップページに、スライダープラグイン「Swiper」を使って
1.フェード切り替え
2.自動再生
3.クリックで次の画像へ移る
というスライダーを実現したいです。

発生している問題

1と2までは実現できたのですが
3はクリックだけでは反応しなくて、クリックしたまま左右にドラッグしたら前後の画像に切り替わります。
理想はどこをクリックしても次の画像に切り替わることです。

お知恵をお貸しいただけると幸いです。。

該当のソースコード

<div class="swiper-container">

<div class="swiper-wrapper" id="swiper-click">
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/images/img_slider01.jpg" alt="" class="slide"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/images/img_slider02.jpg" alt="" class="slide"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/images/img_slider03.jpg" alt="" class="slide"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/images/img_slider04.jpg" alt="" class="slide"></div>
<div class="swiper-slide"><img src="<?php echo get_template_directory_uri(); ?>/images/img_slider05.jpg" alt="" class="slide"></div>
</div>

</div>

var mySwiper = new Swiper('.swiper-container', {
	effect:'fade',
    slidesPerView: 1,
	centeredSlides : true,
    autoplay: {
       delay: 8000,
       disableOnInteraction: false,
      },
    speed: 2000,
    loop: true,
    slideToClickedSlide: true,
    onClick: function(swiper,event){
       swiper.slideNext();
    }
});

参考記事

https://muut.com/swiper#!/swiper/general:change-slide-on-click

http://idangero.us/swiper/api/#events

補足情報（FW/ツールのバージョンなど）

Wordpress利用

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[otmy92]

ルールをしっかり把握しておらずすみません；
解決済みにさせていただきます。ありがとうございました。

Answer 1

swiperの設定は詳しく覚えてないですが、普通にCSS的に考えると、
swiperに前後ボタンをつけて、前ページボタンをdisplay:none;やらなにやらで消して、
後ページボタンをvisibility:hidden;やら何やらでクリックできる状態のまま消して、
画像が表示されるエリアにposition:relative、
後ページボタンにposition:absolute; top:0; left:0;して、
後ページボタンの幅を画像とおなじサイズに指定する方法はどうですか？

Comments

[otmy92]

CSSでやる方法があるとは思いつきませんでした！ありがとうございます。

私がvisibility:hidden;をうまく使いこなせていなく、なぜだかうまくできなかったので
以下の方法で実現することができました。ヒントをいただいたおかげです。数時間悩んでいたので…ありがとうございました！

■HTML
<div class="swiper-container">の閉じタグの前に以下を追加

<!--　Swiperのナビボタン追加　-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

■JavaScript
以下を削除して
slideToClickedSlide: true,
onClick: function(swiper,event){
swiper.slideNext();
}

以下を追加
// ナビゲーションボタン
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}

■CSS
swiper.min.cssにrelativeやabsoluteやらはすでにあったので
以下だけ追加

.swiper-button-prev{
display:none;
}
.swiper-button-next{
top:0;
width:100%;
height:100%;
background:none;
}

[H40831]

解決してなによりです^^