TOP / JS / プラグイン / 【jQuery】slickの使い方

【jQuery】slickの使い方

導入

ファイルをダウンロード

公式サイトからファイルをダウンロードし、サーバーにアップロードします。

必要ファイル

slick
∟ ajax-loader.gif
∟ fonts
∟ slick-theme.css
∟ slick.css
∟ slick.min.js

CDNを使う場合は不要です。

読み込む

WordPressの場合function.phpで読み込みます。

function taco_enqueue()
{
    // slick
    wp_enqueue_style('slick-theme', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/js/slick/slick-theme.css'));
    wp_enqueue_style('slick', get_stylesheet_uri(), array(), filemtime(get_template_directory() . '/js/slick/slick.css'));
    wp_enqueue_script('slick', get_template_directory_uri() . '/js/slick/slick.min.js', array(), filemtime(get_template_directory() . '/js/slick/slick.min.js'), true);
}
add_action('wp_enqueue_scripts', 'taco_enqueue');

上記はこういう感じでファイルを入れている場合です。

テーマフォルダ
∟ function.php
:
∟ js
  ∟ slick
    ∟ ajax-loader.gif
    :
    ∟ slick.min.js

任意の場所で使う

スライドする要素をラップしている要素にクラスをつけて（ここでは「slider」）、jQueryで指定します。

<ul class="slider">
  <li><img src="image01.jpg"></li>
  <li><img src="image02.jpg"></li>
  <li><img src="image03.jpg"></li>
</ul>
//slick
    $('.slider').slick({
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
        arrows: true,
 centerMode: true,
        centerPadding: '100px',
        prevArrow: '<div class="slick-prev"><img src="images/common/icon_prev.svg"></div>',
        nextArrow: '<div class="slick-next"><img src="images/common/icon_next.svg"></div>',
        responsive: [{
            breakpoint: 768,  //ブレイクポイントを指定
            settings: {
                slidesToShow: 1,
            }
        }]
    });

JS プラグイン
slick スライドショー

参考

関連記事