jQuery

slickスライダーで画像の高さ毎にスライドの高さを変える方法

slickスライダーでスライド画像ごとに高さが違う場合、一番高さのある画像に合わせて高さが保持されるんですけど、小さい画像の下に空白があるのが嫌で調整してほしいと言われたので詰める方法をググった覚書。

slickのoptionで設定

slickのoptionにちゃんと設定があるらしい。すごい。うれしい。

設定方法は下記を追加するだけ。

adaptiveHeight:true

WordPressのfunctions.phpでSlick Slider のスクリプトとスタイルをページに追加する場合

WordPressで使いたい場合は、こんな感じでfunctions.phpからslickスライダーを動かすために必要なファイルとコードを挿入できる。（※フロントページにいれる場合の分岐あり）

function custom_recommended_posts_slider_assets() {
    wp_enqueue_style('slick-style', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
    wp_enqueue_style('slick-theme-style', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css');
    wp_enqueue_script('slick-script', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);

    if (is_front_page()) {
        wp_add_inline_script('slick-script', '
            jQuery(document).ready(function($){
                $(".recommended-posts-slider .slick-slider").slick({
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    dots: true,
                    infinite: true,
                    speed: 500,
                    autoplay: true,
                    autoplaySpeed: 2000,
                    adaptiveHeight:true,
                      responsive: [
                        {
                          breakpoint: 1024,
                          settings: {
                            slidesToShow: 4,
                            slidesToScroll: 1,
                            infinite: true,
                            dots: true
                          }
                        },
                        {
                          breakpoint: 600,
                          settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                          }
                        },
                        {
                          breakpoint: 480,
                          settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                          }
                        }
                      ]
                });
            });
        ');
    } 
}
add_action('wp_enqueue_scripts', 'custom_recommended_posts_slider_assets');
  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
gifteeを贈る / コーヒーをおごる / mail

1
Outlookを最小化するとタスク バーから消えるのを防ぐ方法

outlookを最小化すると勝手に終了してしまう outlookを最小化すると勝手に終了してしまうと相談されたけど実はそれ勝手に閉じてるわけじゃなくて、おそらく「最小化時にアイコン化する設定」になって ...

2
てがろぐにいいねボタン・改を設置する方法

前提 自分用ブックマークサイトとして使用しているてがろぐに、いいねボタンをつけようという狙いです。なので、てがろぐのセットアップは終了し稼働しているものとします。 配布ページのマニュアルを参考に進めま ...

3
感想が苦手でもOK！「同人感想メーカー」で簡単＆楽しく感謝を伝えよう

感想をもっと手軽に、お気軽に。 https://labo.01kawa.com/kansou 同人イベントやSNSで大好きな作家さんの作品に感動したとき、「感想送りたいな！」って思うけど、言葉に詰まっ ...

-jQuery
-