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

VWSとは フォーラム Lightning [ 解決済 ] 固定ページ内で、SWIPERを使用したい

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #74084

    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

    ■ 実際の症状
    動かない

    #74085

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

    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 のスライダーブロックではダメな理由は何でしょうか?

    #74087

    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>
    
    #74151

    DRILL LANCER
    モデレーター

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

    例:

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

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

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

    #74170

    横から失礼します。

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

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

    1行目の

    <div class="swiper">

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

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

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

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

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

    #74186

    webfactoryjp
    参加者

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。