Swiperで、slidesPerViewが1もしくはautoにし、
.swiper-container { overflow: visible; }
で左右を見えるようにしています。(幅を設定したスライダーをmargin:autoで中央に配置している形です。)
スライドが一個のみの場合、複製されているスライドがカレント含め全部で3つになってしまいます。なので左右が切れたりしてしまっており。
複製するオプションを振ったはずが、効いておりません。。
data属性に振ったものをjsに渡しているのですが、何か誤り等ありますでしょうか?
data-slider-config='{ "spaceBetween": 50, "slidesPerView": "auto", "loop": true, "loopAdditionalSlides": 10, "loopedSlides": 6, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev"}, "breakpoints": { "768": { "spaceBetween": 10 } } }'
Swiperのインスタンスを確認して、値が渡っていることは確認しているのですが…
Swiper 4.5.1です。お力をお借りしたく、、よろしくお願いします!
補足です。やりたい原理は下記サイトの流れているカルーセルスライダのところと同様です。
https://www.serendip.ws/archives/6398
こちらはスライダーがloopAdditionalSlidesで正常に9個に複製されています。こちらは6系をお使いなので、オプションが違うのかもしれません。。自分でも調べます。
更に追記ですが、swiperを最新にして、スライド3つ、loopAdditionalSlides、loopedSlidesを多めの値に設定してスライドは9個からは増えませんでした。
上記サイトでも複製されているわけではない?オプションの意味を履き違えているのかもしれません…
一旦該当の箇所はSlickに置き換えます。お目汚し失礼いたしました。
あなたの回答
tips
プレビュー