Lightning、トップページスライドショーのカスタマイズ

お世話になります。
クライアント案件で無料のLightningテーマを使い制作している者です。

トップページスライドショー(swiper)のカスタマイズが可能なのか、確認させてください。

左右の画像が見切れる形のスライドショーを作りたく、
トップページスライドショーのUIからの設定だけでは制作が難しかったので、
テーマにJSファイルを作成し制作しています。

下記WPのオリジナルテーマでは、実装できるのですが、
Lightningでは同じようにならずに試行錯誤しております。

■オリジナルテーマ
https://org-theme.sample1.xyz/
WP バージョン 6.5

■Lightning （子テーマ）
https://lightning-theme.sample1.xyz/
WP バージョン 6.5
Lightning バージョン: 15.21.1（G3）

＊共にBASIC認証はdemo、demoです
＊両サイトともスライドショー部分を再現するためのデモサイトです

Lightningで実装できない点は、下記になります。

【１】「centeredSlides: true」を指定しても、1枚目の画像（.swiper-slide-active）が中央表示されず、
2枚目の画像（.swiper-slide-next）が中央表示されてしまう。

【２】自動再生時、5枚目以降の画像が非表示になったり、一部だけの表示になってしまう。
（要件としては自動再生は不要のため、本当は「autoplay: false」にしたい）

【３】ナビゲーションの次へのボタンについて、1度目のクリック時にだけ次の画像に遷移せず、
swiper-wrapperにJSで付与している「transform: translate3d」の値が調整されて、少し左に戻るような挙動になってしまう。
また、スライド量が画像の横幅よりも多くなってしまう。

両サイト共通箇所は、
?swiperのバージョン11.0.2
?画像は6枚設定
（オリジナルテーマはテンプレートファイルからライブラリの画像を取得し表示、Lightningはトップページスライドショーから設定）
?swiperのオプションの指定は下記です

 const swiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 1.4271, //950px * 500px
    spaceBetween: 24,
    centeredSlides: true,
    centeredSlidesBounds: true,

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

今回の制作は、WP管理画面からクライアント自身が画像の変更など出来るようにするため、
テンプレートファイルに記述せずに作成しています。

上記の【１】～【３】がLightningの仕様上、カスタマイズ可能か教えていただけたら幸いです。

• This topic was modified 6 months ago by chihiro8.
• This topic was modified 6 months ago by chihiro8.
• This topic was modified 6 months ago by chihiro8.
• This topic was modified 6 months ago by chihiro8.
• This topic was modified 6 months ago by chihiro8.