Q&A
当方の環境では問題が確認できませんでした。
実現したいこと
最終的には以下の参考サイトのように３つにわけたスライダーのオブジェクトを重ね合わせて（それぞれ再生スピードを変える）表示したいと考えています。
https://jobs.nealle.com/
発生している問題・分からないこと
実現したいことを行うためにまずsplideを使用して、sliderを３つ作成しました。
小要素の画像は、CSSでそれぞれsizeとpositionを指定しました。
３つ目のスライダーは参考サイトのように最終的に一番後ろになる予定で陰っぽくするためblurをかけています。
スライダーを3つ設置すると、自動スクロールが不安定になります。
・動きがカクつく
・スピードが一定でなくなる
1つだけなら安定動作しますが、2つ以上になると不安定になります。
該当のソースコード
HTML
1 <div class="galley_container"> 2 <div class="splide" id="random-slider-1"> 3 <div class="splide__track"> 4 <ul class="splide__list"> 5 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/300x200.png?text=1" class="random-img random-1"></li> 6 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/250x180.png?text=2" class="random-img random-2"></li> 7 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/320x220.png?text=3" class="random-img random-3"></li> 8 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/280x210.png?text=4" class="random-img random-4"></li> 9 </ul> 10 </div> 11 </div> 12 <div class="splide" id="random-slider-2"> 13 <div class="splide__track"> 14 <ul class="splide__list"> 15 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/300x200.png?text=1" class="random-img random-1"></li> 16 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/250x180.png?text=2" class="random-img random-2"></li> 17 </ul> 18 </div> 19 </div> 20 21 <div class="splide" id="random-slider-3"> 22 <div class="splide__track"> 23 <ul class="splide__list"> 24 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/300x200.png?text=1" class="random-img random-1"></li> 25 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/250x180.png?text=2" class="random-img random-2"></li> 26 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/320x220.png?text=3" class="random-img random-3"></li> 27 <li class="splide__slide"><img src="https://placehold.jp/aaaaaa/ffffff/280x210.png?text=4" class="random-img random-4"></li> 28 </ul> 29 </div> 30 </div> 31 </div>
JS
1document.addEventListener('DOMContentLoaded', function () { 2 const sliders = [ 3 { 4 id: '#random-slider-1', 5 options: { 6 type: 'loop', 7 perPage: 1, 8 focus: 'center', 9 arrows: false, 10 drag: false, 11 pagination: false, 12 fixedWidth: 420, 13 autoScroll: { 14 speed: 2, 15 pauseOnHover: false, 16 pauseOnFocus: false, 17 }, 18 }, 19 }, 20 { 21 id: '#random-slider-2', 22 options: { 23 type: 'loop', 24 perPage: 1, 25 focus: 'center', 26 arrows: false, 27 pagination: false, 28 fixedWidth: 800, 29 autoScroll: { 30 speed: 1.2, 31 pauseOnHover: false, 32 pauseOnFocus: false, 33 }, 34 }, 35 }, 36 { 37 id: '#random-slider-3', 38 options: { 39 type: 'loop', 40 perPage: 1, 41 focus: 'center', 42 arrows: false, 43 pagination: false, 44 fixedWidth: 420, 45 autoScroll: { 46 speed: 1.5, 47 pauseOnHover: false, 48 pauseOnFocus: false, 49 }, 50 }, 51 }, 52 ]; 53 54 sliders.forEach(({ id, options }) => { 55 const splide = new Splide(id, options); 56 splide.mount(window.splide.Extensions); 57 58 const autoScroll = splide.Components?.AutoScroll; 59 if (autoScroll) { 60 autoScroll.pause = function () {}; // ホバー停止対策（成功） 61 autoScroll.play = function () {}; 62 } 63 }); 64}); 65
CSS
1.splide__slide { 2 position: relative; 3 height: 500px; 4 overflow: visible; 5} 6.random-img { 7 position: absolute; 8 transition: transform 0.3s, top 0.3s, left 0.3s; 9 max-width: 300px; 10 height: auto; 11 box-shadow: 0px 13px 29px rgba(4, 0, 0, 0.2); 12 border-radius: var(--border-radius); 13} 14.random-1 { 15 top: 20%; 16 left: 35%; 17 transform: scale(1.2); 18} 19.random-2 { 20 top: 50%; 21 left: 30%; 22 transform: scale(0.9); 23} 24.random-3 { 25 top: 10%; 26 left: 20%; 27 transform: scale(1.1); 28} 29.random-4 { 30 top: 40%; 31 left: 20%; 32 transform: scale(1.3); 33} 34#random-slider-3 .splide__slide img { 35 filter: blur(10px); 36}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
共通のclass名を使用しているのからか？と思い、それぞれに指定をしてみましたが動きは変わりませんでした。。。。。
#random-slider-1 .random-1 {
top: 20%;
left: 35%;
transform: scale(1.2);
}
#random-slider-1 .random-2 {
top: 50%;
left: 30%;
transform: scale(0.9);
}
#random-slider-1 .random-3 {
top: 10%;
left: 20%;
transform: scale(1.1);
}
#random-slider-1 .random-4 {
top: 40%;
left: 20%;
transform: scale(1.3);
}
#random-slider-2 .random-1 {
top: 20%;
left: 35%;
transform: scale(1.2);
}
#random-slider-2 .random-2 {
top: 50%;
left: 30%;
transform: scale(0.9);
}
#random-slider-3 .random-1 {
top: 20%;
left: 35%;
transform: scale(1.2);
}
#random-slider-3 .random-2 {
top: 50%;
left: 30%;
transform: scale(0.9);
}
#random-slider-3 .random-3 {
top: 10%;
left: 20%;
transform: scale(1.1);
}
#random-slider-3 .random-4 {
top: 40%;
left: 20%;
transform: scale(1.3);
}
補足
特になし
お忙しい中ご確認ありがとうございます。
codepenでも確認したところ、Chromeで確認すると確かに問題がないのですが、safariで見るとスライダーの動きが不安定になります。。。
https://codepen.io/ymymymymmmm/pen/vEEzaep
そうなのですね。
当方、Mac環境がないのでiPhoneで見てみたところ、問題なく動作しているようでした。どうやら、Mac環境限定の問題のようですね。
当方ではお役に立てなさそうなので、他の回答者をお待ちください。
この Issue が近いのかもしれません。
https://github.com/Splidejs/splide/issues/1253
コメントありがとうございます！
いただいたURLを参考にCSSにwill-change: transform, top, left;をいれると問題が解決しました！！！！！！ありがとうございます！！！！
ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？
ご解決されて何よりです。
お手間をおかけいたしますが、自己解決で対応していただけますと幸いです。
よろしくお願いします。
あなたの回答
tips
プレビュー
