やりたいこと

Swiper.jsを使い、<p>をスライダーにしています。(スライド切替方法のメイン: mousewheel)
デフォルト動作だと、スライドの切替に移動が発生してしまいます。(transform: translate3d())

私はこのように、スライド切替の際、要素の移動なしにハイライトでスライダーを実装したいです。

試したこと

js
1on: {
2  slideChange: function () {
3  document.querySelector('my-swiper').style.transform = “translate3d(0,0,0)”;
4  },
5}

→ エラー: Uncaught TypeError: Cannot read property 'style' of null

また、jQueryのCDNも読み込んであるのでDOMの取り方を
$('.my-swiper')に変えてもみたのですが、こちらはUncaught TypeError: Cannot set property 'transform' of undefinedとエラーが出てしまったり、onを外に出してみても同じ結果でした。

また、for文がいるのかなと思い、

js
1for (let i = 0; i < this.slides.length; i++) {
2  mySwiper.setTranslate(this.slides[i]);
3  mySwiper.updateActiveIndex();
4  mySwiper.updateSlidesClasses();
5}

ともやってみましたが、一度次のスライドに移動したきり、動かなくなりました。（translateがずっとslide[1]の位置を返している）

コード

JSFiddle

自分なりに、コードを読んだりたくさんの検索、試行錯誤をしてみたのですが解決できず、お手上げ状態です…。

もし「スライドを移動させずに切り替えるならこっちの方法のがいいよ」等ありましたら、是非そちらもご教授いただけますと幸いです。

何卒宜しくお願いいたします。

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

回答1件

ベストアンサー

こんばんは。

イベントを拾わずに、普通に

css
1.swiper-wrapper {
2  
3  transform: translate3d(0,0,0) !important;

とするのはどうでしょうか。

https://jsfiddle.net/Lhankor_Mhy/nLzaye02/

コメントを受けて追記

transformを固定することによって、transitionが終了したと判別されないことが原因のようです。
Swiper のコードを読んでみましたが、speed が0に設定されているときは、即座にtransitionEndを呼ぶようでしたので、そのように設定を変更してみてはいかがでしょうか。

サンプル

js
1var mySwiper = new Swiper('.my-swiper', {
2    on: {
3      init: function() {
4        this.snapGrid = this.slidesGrid;
5        this.isEnd = false; // 追加
6      },
7  
8  
9    },
10  
11    speed:0, // 追加

あと、これ、解決するの難しかったです。
おそらく、Swiperはこういう用途に向いていないんだと思います。
他の問題が起きてくる可能性もあるかと思いますので、別のプラグインを検討した方が早いかもしれません。

投稿2020/09/26 15:00

編集2020/09/28 03:04

Lhankor_Mhy

総合スコア36134

yu_6

2020/09/26 16:39

回答ありがとうございます！それだと、ページネーションボタンをクリックなど、クリックでスライド切替した際は上手くいきますが、 mousewheelでスライド切替した場合は途中で止まったり、逆側のホイール回転に反応しなくなるなど、上手く動かなくなってしまいます…。（スライド切替はmousewheeelメインで考えています。言葉で言ってなくてすみません汗）他に何かいい案ございましたら宜しくお願いいたしますm(＿)m