【Bubble】WonderfulImageSliderのページネーションをスライド外に表示する方法

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツールBubbleでスライドショーを実装する際に活躍するプラグイン「WonderfulImageSlider」のページネーション位置をデフォルトのスライド内からスライド外へ変更する方法を紹介します。

目次
【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

    氏名

    法人名

    メールアドレス

    電話番号

    お問い合わせ詳細

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

    デフォルトのページネーション位置
    表示位置変更後のページネーション

    プラグイン「WonderfulImageSlider」のエレメントで設置したスライドショーのページネーションは初期設定ではスライド内に表示されます。

    今回の実装イメージは、上図の右図のようにページネーション位置をスライド外(スライド直下)に表示させた状態です。

    WonderfulImageSliderのプロパティを1つ編集するだけで簡単に調整できるのでぜひ次の項の通りにやってみてください。

    Image Heightプロパティの値を小さくする

    Image Height(%)欄の値を小さくする

    結論。プラグインWonderfulImageSliderエレメントのAppearanceタブ内のImage Heightプロパティの値をデフォルトの100%から90%などに下げると、ページネーションをスライド外に表示できます!

    あとはお好みで表示位置やスライドショーのサイズ・比率を調整してください。

    【日本最大級のノーコード開発実績】
    無料でアプリ・システム開発の相談を受付中

      氏名

      法人名

      メールアドレス

      電話番号

      お問い合わせ詳細

      送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

      「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
      目次