Cocoon カルーセル画像 画面横幅いっぱい表示 | OFFのパソコン日記

Cocoon カルーセル画像 画面横幅いっぱい表示

ある団体のホームページ(cocoon wordpress)を運営しています。

トップページのカルーセル画像を画面横幅いっぱいに表示しました。

■ function.phpに設定追加

//カルーセルカードサムネイルサイズ
add_image_size('carousel_thumb', 1920, 600, true);
add_filter('get_carousel_entry_card_thumbnail_size', function (){
return 'carousel_thumb';
});
//カルーセル スマホ表示数変更
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: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1240,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 1023,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 834,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
})(jQuery);
');
wp_add_inline_script( 'slick-js', $data, 'after' ) ;
}
}
endif;

■ プラグインRegenerate Thumbnailsでサムネイルの再生成
アイキャッチ画像からのみサムネイルを再生成をクリック

■ CSSに設定追加

.carousel {
margin-top: 0px;
}
.carousel-content {
margin: 0;
overflow: hidden; /* はみだし非表示 */
}
.carousel .a-wrap {
padding: 0em;
}
.carousel-content .a-wrap {
margin: 0 0 3px 0;
}
.carousel-content .a-wrap:first-child {
margin-left: 0px;
}
.carousel-entry-card-thumb {
margin-top: 0;
}
.slick-slide img {
border-radius: 0px;
}
#carousel .carousel-in {
width: 100vw!important;
padding: 0px ;
margin: 0 auto!important;
}
.slick-slide img{
box-shadow :none;
}
.slick-prev:before, .slick-next:before {
display:none;
}