Q&A
Closed
jsライブラリ、Splideを使用して、スライダーを作成しています。
最初のスライドがなぜか、画面右によって表示されてしまいます。
cssでleft:0;をかけたりしたのですが、画面をリロードするとまた同じ位置に戻ってしまいます。
ちなみに一度画像をスライドすると、以降は期待通りの位置に表示されます。
原因がわからず困っています。どなたかご教授願えないでしょうか・
エラーは出ていません。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
### 該当するソースコード
```言語名
css,php,js,html
cssにて位置調整を行なっても、リロードすると元の位置に戻ってしまう。
(cssは効いている状態)
以下スライドのインスタンスのコードです。
<script>
new Splide('#slider_sp', {
autoplay: false, // 自動再生
type: "loop", // ループ
rewind: true, // スライダーの終わりまで行ったら先頭に巻き戻す
pauseOnHover: false, // カーソルが乗ってもスクロールを停止させない
interval: 2000, // 自動再生の間隔
speed: 1000, // スライダーの移動時間
perPage: 1, // 表示するスライドの枚数
perMove: 1,
// focus: "center", // アクティブなスライドを中央にする
updateOnMove: true, // is-activeクラスを移動前に更新する
// gap: "32px",
padding: "15vw",
trimSpace: "move",
// fixedWidth: '700px',
breakpoints: {
812: {
perPage: 1, // 500px未満の表示枚数
// focus: "center",
padding: {left:"7vw",right:"10%"},
},
680:{
// focus: "center",
padding: {left:"5%",right:"5%"},
},
390:{
padding:{left:0,right:"5%"},
gap:"8px",
},
},
}).mount();
</script>
@hayatomaruoka
Questioner
.splide__listに自作のcssを当てていることが原因でsplideの位置調整がバグってしまうとのことでした。スタイルを消して、別の要素にかけなおしたところ解決しました！