[ 解決済 ] 固定ページ内で、SWIPERを使用したい

[webfactoryjp]

■ WordPress のバージョン
6.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 1.16.0

■ Pro Unit のバージョン
バージョン 0.17.1

■ スキンの種類
プレーン

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
固定ページにおいて
vk blockやコンテンツスライダーを使用せず
任意の文字や画像を
swiperでスライド出力したいのですが
元々swiperが内包されているとのことで下記のようなコードを
カスタムHTMLで、固定ページに入れたのですが、
swiperが動いてくれません。

内包してあるswiperを動かすにはclass名に何か入れないといけないでしょうか。

■ 自分で試した事

<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

■ 症状が発生するブラウザ
chrome

■ 実際の症状
動かない

[石川＠Vektor,Inc.]

ブロックエディタやテーマの幅処理に応じてチューニングしてるので、スライダーブロックを配置して見比べるのが一番早いと思います。

https://patterns.vektor-inc.co.jp/?post_type=vk-patterns&pattern-industry=&pattern-product=&pattern-type=slider&demo-site=&s=&vkfs_form_id=fc550ff3-791b-426b-aeb3-375e7fb39bd8

ちなみに VK Blocks のスライダーブロックではダメな理由は何でしょうか？

[webfactoryjp]

石川様
ご回答ありがとうございます。

最終的には
プラグインACFを組んで
任意の画像をメディアから選択したものを読ませたいのです。
最低限必要な操作ができる程度のユーザーさんでも
メニューから画像を選択するだけでスライダーに組めるようにしたいのです。

VK Blocks はわかっている人からしたらとても使い勝手の良いツールですが、エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり、その都度修正してあげなくてはなりません。

エンドユーザーには最低限出来る事だけを公開しておきたいのです。

最終的には下記のようなコードでACFで設定した画像を呼び出したいと考えています。

<div class="swiper">
<div class="swiper-wrapper">
<?php if( have_rows('banner_top', 'option') ): ?>
    <?php while( have_rows('banner_top', 'option') ): the_row(); 
         // vars
        $image = get_sub_field('banner_top_img', 'option');
        $link = get_sub_field('banner_top_url', 'option');
     ?>
         <div class="swiper-slide>
            <?php if( $link ): ?>
                <a href="<?php echo $link; ?>">
            <?php endif; ?>
                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
            <?php if( $link ): ?>
                </a>
            <?php endif; ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
</div>
</div>

[DRILL LANCER]

多分 Swiper に対して指示を送る Javascript が存在しない or 読み込まれていないのが原因です。

例：

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

現状の仕様で実現したいのなら下記を参考に指示用の Javascript をつくって swiper の後で読み込ませる必要があります。
https://swiperjs.com/swiper-api

P.S.
掲載されたコードの例だとスライダーアイテムブロックの中に画像ブロックを設置して画像ブロックのツールバーからリンクを設定すればほぼ同等なことができると思います。

[対馬 俊彦]

横から失礼します。

DRILL LANCER さんの回答通りなのですが、ちょっと補足させていただきます。

JavaScript を書かずにスライドショーを動かす TIPS を紹介します。

1行目の

<div class="swiper">

を

<div class="lightning_swiper-container swiper-container">

と書き換えれば、トップページのスライドショーと同じ設定で動作します。

エンドユーザーにこの操作を任せたら、レイアウト崩れが頻回に起こり…

ロックをかけておけば、そのリスクが軽減されると思います。

画面幅に応じたサイズの画像を WordPress が自動生成してくれるということもスライダーブロック（画像ブロック）で作るメリットです。

[webfactoryjp]

対馬さまのご指摘のクラス名を付与することで動作できました。
lightningG3をこよなく愛しているからこその回答と感服しましたm(__)m

[投稿者]

投稿