WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマSKIN:ページビルダーのスライダー設定方法

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;
}
The following two tabs change content below.

タカ

スポーツが好きな30代男性です。 休みの日はフットサルやバスケットをしています。

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。