HOME  /Welcart
 /Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方
2020年09月09日

Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方

「slick.js」はjqueryでスライド動作を指定するプログラムです。

1.slick.jsの入手方法

①下記のSLICK公式ページに入ります。

http://kenwheeler.github.io/slick/

②TOPメニュの「get it now」をクリックします。

③下記の「Download Now」をクリックしてプログラムを取得します。

④入手した「zip」ファイルを解凍して下さい。

slick」フォルダの下記ファイルを利用します。

■上記の赤枠の物が最低限必要になる物です。

2.slick.jsの設定

2-1.slickの必要ファイルを子テーマに取り込みます。

①子テーマフォルダの中に「slick」フォルダを作成します。

②「slick」フォルダの下に解凍した「slick」ライブラリから必要フォルダやファイルをコピーします。

結果は下記になります。

③子テーマフォルダの中に「js」フォルダを作成します。

④「js」フォルダの中に「*.js」ファイルを作成します。

親テーマの「js」フォルダの中にある適当な「js」ファイルをコピーして下さい。

このファイルはユーザが作成するJqueryプログラムを入れるファイルです。

適当なファイル名に変更します。

上記ファイルを開いてサンプルコードを書いておいて下さい。

/*****************************************/
/* 自作のjqueryプログラム */
/*****************************************/
/* ヘッダ画像のスライダ設定 **************/
$(function(){
  $('#main-image').slick({
    arrows:false,
    dots:true,
    autoplay:true,
    autoplaySpeed:4000,
    speed:1000,
    /*variableWidth:true,
       centerMode:true,*/
  });
});
/*****************************************/

赤字の所が「slickオプション」です。

⑤「theme_setting.php」に「slick」関連ファイルの読み込みを追加します。

 Welcart_Basicの子テーマを作成する

上記で作成した「theme_setting.php」に「slick」関連ファイルを追加します。

 

変更した「theme_setting.php」は下記になります。

<?php
/*****************************************************************************
CSSやスクリプトファイルの読み込み
*******************************************************************************/
function theme_setting() {
/* スクリプトファイルの読み込み */
wp_enqueue_script('jQuery',"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js");// ①GoogleのJavaScriptライブラリ
wp_enqueue_script('slick',get_stylesheet_directory_uri().'/slick/slick.min.js');//②slickプラグイン
wp_enqueue_script('my_js_slick',get_stylesheet_directory_uri().'/js/my_jquery.js');//自作jQueryプログラム	
/* Welcartのファイルの読み込み */
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'parent-cart' , get_template_directory_uri() . '/usces_cart.css', array('parent-style', 'usces_default_css') );
wp_enqueue_style('slick',get_stylesheet_directory_uri().'/slick/slick.css'); //④slick
wp_enqueue_style('slick_theme',get_stylesheet_directory_uri().'/slick/slick-theme.css');//⑤slick
}
add_action('wp_enqueue_scripts', 'theme_setting');
?>

■「wp_enqueue_script」はスクリプトファイルを読み込むWordPress関数です。

wp_enqueue_style」の違いに気を付けて下さい。

①JavaScriptライブラリはGoogleの物を導入しています。

「slick」は「JavaScriptライブラリ」で記述されているので、これが必要になります。

②slickプラグインを読み込みます。

「slick」フォルダにある「slick.min.js」を読み込みます。この中に「slickコマンド」が定義されています。

③自作Jqueryプログラムを読み込みます

この中に「slickコマンド」を使ったプログラムを記述します。

この例では「my_jquery.js」です。

④⑤slickのCSSを読み込みます。

3.slick.jsのオプション

「my_jquery.js」の中に下記の「slick」のオプションを利用してスライダーの挙動を記述します。

良く利用するオプション

Option  Default Description
arrows true 次へ/前へ矢印を表示します。

矢印は白なので、背景が白だと見えません。

その時はCSSで下記を指定します。

.slick-prev:before,
.slick-next:before {
color: #000;
}
dots false trueでドットタイプのスライドインジケータを表示

ドットの色は黒で、表示位置は画像の25px下です。

またドットのkラスは「.slick-dots」になります。

draggable true マウスによるドラッグを有効にする
swipe true スマホのスワイプを有効にする
touchMove true falseにするとドラッグやスワイプ後に画像が動くようになる

スライドの自動再生関連のオプション

Option  Default Description
autoplay false trueでスライドの自動再生を有効にする
autoplaySpeed 3000 スライド自動再生間隔(単位:ms)

デフォルトは3秒後にスライド開始

speed 300 スライドの移動速度(単位:ms)

数値を大きくするとゆっくりスライドする様になる

infinite true 無限ループ。最後の次は先頭スライドになる。
pauseOnHover true 画像にマウスONで自動再生を一時停止

マウスの場所が変わると再生を再開

pauseOnFocus true 画像をクリックすると自動再生を一時停止

画像外をクリックすると再開

pauseOnDotsHover false trueでドットにカーソルがONした時自動再生を一時停止
rtl false スライダの方向を右から左に変更する

但しスライド画像エリアの指定時に下記記述が必要です

<div id=”slide” dir=”rtl”>
 画像
</div>
fade false スライドでなくフェードにする場合はこれをtrueにする
centerMode false trueでセンタ画像の左右に前後のスライドを少し見せる
centerPadding ’50px’ 前後のスライドの表示量を(pxまたは%)で指定する。

サムネール付きスライダの時に使うオプション

Option  Default Description
focusOnSelect false これをtrueにするとサムネールをクリックした時にメイン画像が変わる
asNavFor $(element) focusOnSelectと合わせて使用

メイン画像のIDやクラスを指定する。

例)asNavFor: ‘#slide’,

slidesToShow 1 ヘッダ画像のスライドは1で良いが、サムネールの場合は表示させたいサムネール数を設定する必要がある

ブレークポイント関連

Option  Default Description
responsive null 指定されたブレークポイントでの設定を有効にします。

下記の例はスマホの時は左右の矢印をOFF、ドットナビゲータをONにしています。

responsive:[{ breakpoint:768,settings:{arrows:false,dots:true}}]

breakpointは大きい方から指定します。

responsive:[{ 
  settings:{××}
  breakpoint:991,settings:{××} //タブレットの場合768~991(991まで) 
  breakpoint:767,settings:{××}  //スマホの場合(767まで)
 }]

その他のオプション(抜粋)

Option  Default Description
slidesToScroll 1 スクロールの時のスライドの数(通常は使わない)
variableWidth false 自動スライド幅計算を無効にする
focusOnChange false スライド後の画像にフォーカスをあてない。

これをtrueにするとこの画像がフォーカスされるので自動再生は止まる。

dotsClass ‘slick-dots’ スライドインジケータドットコンテナのクラスを変更します
initialSlide 0 開始するスライド
nextArrow 省略 「次へ」の矢印のHTMLをカスタマイズします
prevArrow 省略 「前の」矢印のHTMLをカスタマイズします
vertical false 垂直にスライドさせる
verticalSwiping false スワイプ方向を垂直方向に変更します
waitForAnimate true アニメーション中にスライドを前進させる要求を無視する
zIndex 1000 スライドのzIndex値

 

4.slickイベントやメソッド

slickは「slickコマンド」を使ってスライドさせる以外に「slickイベント」や「slickメソッド」を使う方法も用意されています。

これは「slickコマンド」の仕様を変えたい場合等に利用されます。

実際のプログラム例は商品画像をサムネール付きスライダで表示するを参照してください。

4-1.slickイベント

イベント コマンド例
スライダーが初期化された時のイベント $(‘クラス名’).on(‘init‘,function(slick){}
スライダがクリックされた時のイベント $(‘クラス名’).on(‘click‘,function(){}
スライド切り替え前のイベント $(‘クラス名’).on(‘beforeChange‘,function(event,slick,currentSlide,nextSlide){}

4-2.slickメソッド

メソッド コマンド例
指定のスライドへの移動 $(‘クラス名’).slick(‘slickGoTo‘, n);

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

welcartで用意されている業務パックデータの表示関数はwhile(usces_have_skus())ループの中でしか使えません。しかしforeachの方がカウンター処理がしやすいのでこれが使える業務パックデータの表示関数を作成しました。

Welcartでは業務パック割引(購入数量割引)という機能があります。この機能を使うとカートページにGPマークが表示させますがこのマークを任意のアイコンに変更する方法を解説しています。

カートに商品を投入すると、商品名は①商品名②商品コード③SKU名④SKUコードを合わせた文字列が商品名として表示されます。これをカスタマイズする方法を解説しています。

Welcartのカートへの投入ボタンのプログラム解説と、色と文字を変更する新しい関数の作成方法を解説しています。

welcart_basicのオプション表示は、入力必須をチェックしてもユーザから見て判りません。またチェックボックスやラジオボタン表示に一部、おかしい所があります。ここではこれらの修正方法を解説しています。

Welcartにはポイントを付与し、商品購入時にそのポイントを利用する仕組みがあります。又キャンペーン設定でポイントをn倍にしたり価格を値引く仕組みもあります。ここではそれらの概要と問題点及び解決策を解説しています。

Welcartでは業務パック割引(購入数量割引)という機能があります。これは、指定した数量以上を購入した場合に価格を値引く仕組みですが、業務パック割引という言葉はあまりなじみがないのでこのメッセージを変更する方法を解説しています。

Welcart_Basicの購入数量は数値入力です。しかしスマホではこのような入力方法は面倒なので+/-ボタンで購入数量が変更できる様に変更した事例を紹介しています。

Welcartでは個別商品画面に商品オプションやカスタムフィールドを追加する事ができます。ここではその追加方法を解説しています。

Welcartで個別商品表示画面から、商品マスタ編集にジャンプする事ができるとコンテンツ編集効率が飛躍的に向上します。しかしWelcartではこの機能が提供されていないのでこれを可能になる関数を作成します。

ここではWelcart商品を価格順に並び替える為に、WordpressのメタデータにWelcartの価格データを自動的に登録する関数の作成方法を解説しています。

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

Welcartには関連商品という概念はありません。そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数を作成する方法を解説します。

Welcart_basicのメニュをカスタマイズする為にはどの様な仕組みで作られているか?を知る必要があります。そこでここではメニュの仕様を解説しています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する関数の作成方法を解説しています。

カートボタンをカスタマイズする為には、このカートがどの様に作られているのか?を知る必要があります。そこでここではその仕様について解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

welcart_basicの会員システムをカスタマイズする為には、この機能がどの様に作られているか?を知る必要があります。
そこでこのでは会員システムの仕組みについて解説しています。

Welcart_basicの検索機能をカスタマイズする為には、これがどの様に作られているのか?を知る必要があります。ここではその仕様を解説しています。

welcart_basicは商品だけしか検索対象としていませんが、ここではページの情報を読み込んで、カテゴリ別に検索できる様にカスタマイズする方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではwelcartの.検索機能制限の解除、カテゴリが製品か否かの判断関数、上位カテゴリの取得関数、.商品カテゴリの取得関数の作成方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

welcart_basicのカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と無償テンプレート「Welcart_basic」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。