ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマSKIN:ページビルダーのスライダーの表示バランスを調整する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.ページビルダーのスライダー設定方法について知りたいです。

A.下記の方法でご対応ください。

スライダーは、記事本文が表示されるメインカラムの領域の横幅へ合わせて、スライダーの横幅が調整され、その横幅を基準として、画像の比率を保った状態で表示される仕様です。

また、スライダーの表示領域は、設定された複数画像の最も大きい画像のサイズへ調整される仕様なので、横長の画像の下側に余白が生じることとなります。

上記の余白を削除される場合は、下記ファイルをご編集頂くことで実現可能かと思われます。

編集するファイル:pagebuilder/modules/slider.php
編集する箇所:

  $('.pb_slider').slick({
    infinite: false,
    dots: false,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: false,
    autoplay: true,
    fade: true,
    easing: 'easeOutExpo',
    speed: 1000,
    autoplaySpeed: <?php echo apply_filters('page_builder_slider_autoplay_speed', 10000); ?>,
    asNavFor: '.pb_slider_nav'
  });

  $('.pb_slider').slick({
    infinite: false,
    dots: false,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    autoplay: true,
    fade: true,
    easing: 'easeOutExpo',
    speed: 1000,
    autoplaySpeed: <?php echo apply_filters('page_builder_slider_autoplay_speed', 10000); ?>,
    asNavFor: '.pb_slider_nav'
  });

また、縦長の画像をスライダーの領域に拡大表示されない場合は、
外観>TCDテーマオプション>基本設定にある「カスタムCSS」にて、
下記内容を記述することで実現可能です。

.pb_slider .item img {
    width: auto;
    margin: 0 auto;
}

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事