swiperをクリックできないようにすることは可能でしょうか。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
swiperを利用して、自動再生されるスライダーを作成したのですが、
swiperのスライドをクリックすると、swiper自体が表示されなくなってしまいます。
swiperに対するクリックを無効にする方法はあるのでしょうか。

if
1  var swiper = new Swiper('.swiper-container.topview__swiper',{
2    effect:'fade',
3    slidesPerView: 1,
4    autoplay: true,
5    loop: true,
6    speed: 5000,
7    mousewheelControl: false,
8    preventClicks: false,
9    preventClicksPropagation: false,
10    autoplayDisableOnInteraction: false
11
12  });
13  var swiper = new Swiper('.swiper-container.photo-swiper',{
14    slidesPerView: 3,
15    autoplay: true,
16    autoplaySpeed: 0,
17    speed: 250000,
18    loop: true,
19    mousewheelControl: false,
20    preventClicks: false,
21    preventClicksPropagation: false,
22    autoplayDisableOnInteraction: false
23  });
24  function infinite() {
25    swiper.slideTo(swiper.slides.length);
26    swiper.once('transitionEnd', function(){
27      swiper.slideTo(swiper.params.slidesPerView, 0, false);
28      setTimeout(function () {
29        infinite();
30      }, 0);
31    });
32  }
33  infinite();
34}

どうぞ、よろしくお願いいたします。

退会済みユーザー

2018/05/02 08:20

swiperのverで参照ドキュメント、jsの記述の仕方が変わってきます。またswiperはCDNで指定なのか外部ファイル指定なのかビルドツールを使用してimportしているのかもっと細かく情報をください。cdn・外部ファイル・importでエラー内容や対処方法が変わってきます。swiper以前のところで問題が出ていてエラーになっている場合もあります。この質問の書き方だとマイナス評価を受けるおそれがあります。

Lhankor_Mhy

2018/05/02 09:36

問題が再現できるコードをご提示ください。簡単に試した限りでは、「swiper自体が非表示」という現象を再現できません。

k.yuko

2018/05/03 02:23

質問の情報が不足していてすみません。

k.yuko

2018/05/03 02:26

htmlの記述で、それぞれのスライドに対して、swiper-slideに加えてswiper-no-swipngクラスを追加することで問題解決できました。ご指摘、アドバイスありがとうございました。

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

回答3件

自己解決

投稿2018/05/03 02:32

k.yuko

総合スコア6

js
1    preventClicks: false,
2    preventClicksPropagation: false,

を削除するとどうなりますか？

投稿2018/05/02 08:23

Lhankor_Mhy

総合スコア37413

k.yuko

2018/05/02 08:41

回答ありがとうございます。アドバイスいただいた通り、 preventClicks: false, preventClicksPropagation: false, を削除したのですが、変わらずクリックでswiper自体が非表示になってしまいます。

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

ただ単純にswiper自体にクリックを無効にしたい場合は、swiper画像の上にspanタグ等を重ねて(opacity:0;)クリックできないようにすれば良いのでは??と思います。

投稿2018/05/02 08:17

退会済みユーザー

総合スコア0

k.yuko

2018/05/02 08:58

```.swiper-slide { position: relative; } .swiper-slide::after { z-index: 100; position: absolute; top: 0; left: 0; content: ' '; width: 100%; height: 100%; opacity: 0; display: block; }``` spanでの付け方がわからなかったので、擬似要素でつけてみたのですがクリックに反応してしまいます。記述に間違いがあるのでしょうか。

退会済みユーザー

2018/05/02 09:16

一見問題は無さそうですね。こちらローカルでの開発でしょうか？？

退会済みユーザー

2018/05/02 09:22

色々コードが多いとどこでエラーが発生しているのか不明なので、swiperも1つに絞ってオプションも一旦削除して見てはいかがでしょうか。

k.yuko

2018/05/03 02:38

返信に日をまたいでしまいました。すみません。その後、jsではなくhtmlの方にクラスを追加することで解決できました。アドバイスいただいて、jsの情報を絞って検証していくことで jsの記述で自分が理解仕切れてない部分や、js自体の自体の動きには問題がなかったことが確認できました。つたない質問に回答いただきまして、ありがとうございました！

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

あなたの回答