質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

3144閲覧

Swiperで、slidesPerViewが1もしくはautoにしたいが、スライド一個の場合左右にループが複製されない

any--front-end

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/01 08:35

編集2020/12/01 12:38

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に置き換えます。お目汚し失礼いたしました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問