実現したいこと
- ループする複数画像のスライドショーと水平パララックスの併用
発生している問題
以下のサイトのトップページで行われている「複数の画像を横方向にスライドさせつつその画像を水平方向にパララックスさせる」動作をそっくりそのまま実装したいのですが(JavaScript?)、方法がわかりません。
どなたかご教授いただきたいです。
https://www.marketenterprise.co.jp/
該当のソースコード
HTML
1ソースコード 2 <div class="p-top-fv__slide"> 3 <div class="slide__wrap" style="transform: translate3d(XXXXXpx, 0px, 0px);"> 4 5 6 <div class="slide__group js-container"> 7 <div class="item js-item is-visible"> 8 <div class="item__img js-img-wrap" style="transform: translateX(XXXXXpx);"> 9 <img src="~~~" width="~~~" height="~~~"> 10 </div> 11 </div> 12 13 <!-- 画像要素(js-item)が合計6個ある --> 14 〜〜〜 15 </div> 16 17 <!-- スライド要素(js-container)が合計2個ある --> 18 <div class="slide__group js-container"> 19 〜〜〜 20 </div> 21 22 </div> 23 </div>
試したこと
・.slide__wrapクラスと.item__imgクラスのtranslateをJSで制御しているのだと思いますが、該当のファイルが見つけられませんでした。
・またスライドショープラグインであるSwiperのパララックス機能を使って再現しようとしましたが、同機能ではswiper-slide-activeクラスが付与される前後しかパララックスしないためうまくいきませんでした。
・「スライドショー パララックス」などでググりましたが、先述のサイトのような実装を解説しているページが見つけられませんでした。

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/06/01 14:42