カルーセルの前後を見切れ状態にする

参考にしたサイト

https://yuuyuublog.org/carousel_slide_one_by_one/

yuuyuublog.org

【cocoon】1ページに表示されるカルーセルの記事数を変える方法

cocoon、便利ですよね～。必要な機能がすべて揃っており、使い方もシンプルでわかりやすいため、初心者からプロまで、みんなの強い味方です。この記事では、1ページに表示されるカルーセルの記事数を変える方法を書いてみます。デフォルトでは、パソコ

morosaredo.com

インジケーターの黒い点（slic dots）の非表示

［スタイルシート：style.css］への追記

直接編集のパス

サイトのフォルダ/wp-content/themes/cocoon-child-master/styl.css

追記コード

.slick-dots {
	display: none !important;
}

追記場所

/＊必要ならばここにコードを書く＊/　の下に追記

ドットインジケーターあり

ドットインジケーターなし

カルーセルのオートプレイを1枚毎にする方法

［functions.php］に追記

直接編集のパス

サイトフォルダ/wp-content/themes/cocoon-child-master/functions.php

追記コード

参考にしたサイト記載のコードをそのまま貼り付け

追記場所

//以下に子テーマ用の関数を書く　の下に追記

既に別のコードが追記してありますが、〈//ユーザＩＤページ非表示〉コードの下に追記しました。

カルーセルの前後を見切れた状態で表示させる

前後が見切れてる状態

値の変更値

参考にしたサイトの記載コードの［ Slides ToShow: X ］の値のみ変更
６ を 6.75
５ を 5.75
４ を 3.75
３ を 2.75
２ を 1.75

実際の追記コード

//カルーセルを1枚ずつスライドする。
if ( !function_exists( 'wp_enqueue_slick' ) ):
function wp_enqueue_slick(){
  if (is_carousel_visible()) {
    wp_enqueue_style( 'slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css' );
    //Slickスクリプトの呼び出し
    wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', array( 'jquery' ), false, true  );
    $autoplay = null;
    if (is_carousel_autoplay_enable()) {
      $autoplay = 'autoplay: true,';
    }
    $data = minify_js('
              (function($){
                $(".carousel-content").slick({
                  dots: true,'.
                  $autoplay.
                  'autoplaySpeed: '.strval(intval(get_carousel_autoplay_interval())*1000).',
                  infinite: true,
                  slidesToShow: 6.75,
                  slidesToScroll: 1,
                  responsive: [
                      {
                        breakpoint: 1240,
                        settings: {
                          slidesToShow: 5.75,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 1023,
                        settings: {
                          slidesToShow: 3.75,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 834,
                        settings: {
                          slidesToShow: 2.75,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 480,
                        settings: {
                          slidesToShow: 1.75,
                          slidesToScroll: 1
                        }
                      }
                    ]
                });
              })(jQuery);
            ');
    wp_add_inline_script( 'slick-js', $data, 'after' ) ;
  }

}
endif;

一部コードの意味