完全俺仕様備忘録です。WPに実装することを想定しております。
kenwheeler/slick: the last carousel you’ll ever need
まずはともあれダウンロードします。
表示するHTMLを作成。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!--▼Loader--> <div id="loader"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/frontpage/loader.svg" alt=""> </div> <!--▲Loader--> <ul class="slider"> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/assets/img/frontpage/mv-img01.jpg" alt=""> </li> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/assets/img/frontpage/mv-img02.jpg" alt=""> </li> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/assets/img/frontpage/mv-img03.jpg" alt=""> </li> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/assets/img/frontpage/mv-img04.jpg" alt=""> </li> </ul> |
上のローダーと言うのは、全画像読み込むまで、ローディング画像を表示するというやつです。こちらの方が詳細が解説されており、勉強になりました。更にdata-lazyで画像表示しております。
スポンサードリンク
各設定フォルダの作成
- テーマフォルダ最上位ディレクトリに「javascript_conponents」「css_conponents」を作ります。
- 「javascript_conponents」にダウンロードしたslickフォルダ一式を入れます。
- 「custom_conponents」に「slick」フォルダを作り、その中に「slick_css」「js」フォルダを作ります。
カスタマイズするCSSを作成する
cssフォルダには「slick_style.css」を作成します。そして以下のコードを書き、リンクさせます。面倒くさかったらfront.sassに書いてもいいんですけどね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@charset "UTF-8"; .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } /*左右の矢印の位置を変える*/ .slick-prev { left: 90px; z-index: 100; } .slick-next { right: 90px; z-index: 99; } /* スライド数のドットの色を変える */ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #2ecfbd; } /* 矢印の色 */ .slick-prev:before, .slick-next:before { color: black; } |
実行するjsを記述する
jsフォルダにはmain.jsを作成し、以下のコードを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
jQuery(function ($) { $(function () { $('.slider').slick({ infinite: true, dots: true, slidesToShow: 1, centerMode: true, //要素を中央寄せ centerPadding: '50px', //両サイドの見えている部分のサイズ autoplay: true, //自動再生 responsive: [{ breakpoint: 480, settings: { centerMode: false, } }] }); }); }); jQuery(function ($) { $(document).ready(function () { $('.slider').slider(); }); //▼ファイルの読み込みが完了したらLoaderを非表示とする $(window).load(function () { $("#loader").hide(); }); }); |
実行ファイルなのでお好きな様にしてください。wpデフォルトのjqueryを使っているので、書き方が違っていますので注意。
function.phpで読み込む
function.phpを開いて以下を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//JavascriptとかjQueryとか if (!is_admin()) { function register_script(){ // slick.js wp_enqueue_script( 'my-slick', get_template_directory_uri() . '/custom_conponents/slick/js/main.js', array( 'slick' ), '1.0.0', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/javascript_conponents/slick/slick.js', array( 'jquery' ), '2.7.1', true ); } function plus_script() { register_script(); wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Droid+Sans:400,700' ); if (is_home() || is_front_page()) { wp_enqueue_script('slick');// トップページのみに適応させる wp_enqueue_script('my-slick');// トップページのみに適応させる } } add_action('wp_print_scripts', 'plus_script'); } |
以上です。