[ 解決済 ] スライダーの矢印を外に出す方法をお教えください

VWSとは フォーラム VK Blocks・Pro [ 解決済 ] スライダーの矢印を外に出す方法をお教えください

[ 解決済 ] スライダーの矢印を外に出す方法をお教えください

  • このトピックには4件の返信、2人の参加者があり、最後にARTFLAIRにより1年、 5ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #72731

    ARTFLAIR
    参加者

    ■ WordPress のバージョン
    WordPress 6.1.1

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

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

    ■ テーマのバージョン
    15.3.0

    ■ Pro Unit のバージョン
    0.23.2

    ■ スキンの種類
    Origin III

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

    ■ 期待する動作
    以下参考サイトのようにスライダーの矢印を外に出したいです。

    Swiperスライダーの矢印とドットを外に出す方法

    ■ 自分で試した事
    swiper-button-next(prev)のz-indexを上げて、right:-●●pxへ移動しました

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

    ■ 実際の症状
    検証画面上、該当要素が枠外に移動はしたのですが、最前面に表示されずに隠れてしまいます。

    • このトピックはARTFLAIRが1年、 5ヶ月前に変更しました。
    #72772

    VK Blocks のスライダーブロックについて質問されている、
    という前提で回答します。

    コンテナが overflow: hidden; になっているので、
    overflow: visible; に変更すれば表示されると思います。

    #72841

    ARTFLAIR
    参加者

    VK Blocks のスライダーブロックでの前提でご回答ありがとうございます。
    VK Blocks のスライダーブロックで表示される
    prevBtn/nextBtnを枠外に移動させたいのですが難しいでしょうか。

    #72846

    VK Blocks のスライダーで枠外にはみ出したものが表示されないのは
    以下の CSS が効いているからです。

    .swiper-container {
        overflow: hidden;
    }

    hiddenvisible にすれば表示されます。

    #72856

    ARTFLAIR
    参加者

    ご返信ありがとうございます。

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