クリエイティブ
jQueryプラグイン「Slick」の紹介
スライドショーを簡単に設置できるjQueryのプラグインになります。
WordPress上でもスライドショーが使えるプラグインは色々とありますが、今回はオリジナルテーマに組み込んで表示させる方法を記載したいと思います。
設置するだけで簡単にスライドショーが行えるので世界的にも人気のプラグインとなります。
設置方法
方法は２パターンあります。
１パターン目はファイルをダウンロードする方法です。
ダウンロードは公式サイトから、またはこちらから直接ダウンロードをお願いいたします。
ダウンロードしたファイルはヘッダーに配置しておきます。
２パターン目はCDNとして読み込みテーマに反映させる方法です。
CDNからは下記のコードになります。
まず、ヘッダー内に下記のコードを入れます。
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">それに加え、フッターには下記のコードを入れます。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>ちなみにですが、私はWordPressの独自テーマ「functions.php」に下記のコードを加えております。
<?php
function theme_name_scripts() {
//jqueryの読み込み(jQueryはフォルダを作成し設置しています)
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', '3.4.1', false );
//Slickの読み込み(CDNで読み込んでいます)
wp_enqueue_style( 'slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css' );
wp_enqueue_style( 'slick-theme', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css' );
wp_enqueue_script( 'slick-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array( 'jquery' ), '1.9.0', false );
?>以上でslickの設置はできました。
基本的な使い方
使い方は非常にタグとタグを囲んだクラスに好きなクラス名を付けてJavascriptで制御すれば簡単に動かすことが出来ます。
<div class="slider">
<div><img src="images/img01.jpg"></div>
<div><img src="images/img02.jpg"></div>
<div><img src="images/img03.jpg"></div>
</div>次に別ファイルで読み込んでいるJavascriptには下記の記載をします。
jQuery(document).ready(function () {
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
});
});これで一通りの動作ができます。
オプションについて
Slickには様々なオプションがあります。
オプション名／デフォルト
- accessibility／true
- adaptiveHeight／false
- autoplay／false
- autoplaySpeed／3000
- arrows／true
- asNavFor／null
- appendArrows／$(element)
- appendDots／$(element)
- prevArrow／<button type=”button” class=”slick-prev”>Previous</button>
- nextArrow／<button type=”button” class=”slick-next”>Next</button>
- centerMode／false
- centerPadding／50px
- cssEase／ease
- dots／false
- customPaging／なし
- dotsClass／’slick-dots’
- draggable／true
- fade／false
- focusOnSelect／false
- easing／linear
- infinite／true
- edgeFriction／0.15
- initialSlide／0
- lazyLoad／ondemand
- mobileFirst／false
- pauseOnFocus／true
- pauseOnHover／true
- pauseOnDotsHover／true
- respondTo／window
- responsive／none
- rows／1
- slide／”
- slidesPerRow／なし
- slidesToShow／1
- slidesToScroll／1
- speed／300
- swipe／true
- swipeToSlide／false
- touchMove／true
- touchThreshold／5
- useCSS／true
- useTransform／true
- variableWidth／false
- vertical／false
- verticalSwiping／false
- rtl／false
- waitForAnimate／true
- zIndex／1000
サンプルの紹介
弊社のTOPに使用しているスライドショーのコードは以下のようになっています。
jQuery(document).ready(function () {
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
speed: 1000,
dots: false,
infinite: true,
lazyLoad: "ondemand",
pauseOnHover: false,
pauseOnFocus: false,
arrows: false,
fade: true,
});
});まとめ
以上になります。
プラグインを使うことで開発の時間を短縮できたり自身のサイトを拡張したりすることが出来ます。
是非とも積極的に取り入れて快適なjQueryライフをお過ごしください。
