スライダーを別のスライダーと同期して表示
今回は、トップページのスライドで実装した例となります。１つはアイキャッチ用のスライダー、もう一つはナビゲーション用のカルーセルスライダーを準備し、表示内容は同じスライドで、かつ、この２つのスライダーを同期させてスライド表示する際の実装例です。
使っているのは、jQueryベースのスライダーで世界的に有名なslickを使っています。
1.デモ
月を表した画像12枚をスライド表示しています。
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 25 26 27 28 29 30 31 32 33 34 | <section class="slider-demo-blog"> <div class="eyecatch-inner"> <ul class="topslide-slider"> <li data-slide-to="0"><div><figure><img src="./images/month/2022_jan.jpg" alt="January slide"></figure></div></li> <li data-slide-to="1"><div><figure><img src="./images/month/2022_feb.jpg" alt="February slide"></figure></div></li> <li data-slide-to="2"><div><figure><img src="./images/month/2022_march.jpg" alt="March slide"></figure></div></li> <li data-slide-to="3"><div><figure><img src="./images/month/2022_apr.jpg" alt="April slide"></figure></div></li> <li data-slide-to="4"><div><figure><img src="./images/month/2022_may.jpg" alt="May slide"></figure></div></li> <li data-slide-to="5"><div><figure><img src="./images/month/2022_jun.jpg" alt="June slide"></figure></div></li> <li data-slide-to="6"><div><figure><img src="./images/month/2022_jul.jpg" alt="July slide"></figure></div></li> <li data-slide-to="7"><div><figure><img src="./images/month/2022_aug.jpg" alt="August slide"></figure></div></li> <li data-slide-to="8"><div><figure><img src="./images/month/2022_sep.jpg" alt="September slide"></figure></div></li> <li data-slide-to="9"><div><figure><img src="./images/month/2022_oct.jpg" alt="October slide"></figure></div></li> <li data-slide-to="10"><div><figure><img src="./images/month/nov.jpg" alt="November slide"></figure></div></li> <li data-slide-to="11"><div><figure><img src=".//images/month/dec.jpg" alt="December slide"></figure></div></li> </ul> </div> <div class="indicators-inner"> <ul class="indicators-slider"> <li data-slide-to="0"><div><figure><img src="./images/month/2022_jan.jpg" alt="January slide"></figure></div></li> <li data-slide-to="1"><div><figure><img src="./images/month/2022_feb.jpg" alt="February slide"></figure></div></li> <li data-slide-to="2"><div><figure><img src="./images/month/2022_march.jpg" alt="March slide"></figure></div></li> <li data-slide-to="3"><div><figure><img src="./images/month/2022_apr.jpg" alt="April slide"></figure></div></li> <li data-slide-to="4"><div><figure><img src="./images/month/2022_may.jpg" alt="May slide"></figure></div></li> <li data-slide-to="5"><div><figure><img src="./images/month/2022_jun.jpg" alt="June slide"></figure></div></li> <li data-slide-to="6"><div><figure><img src="./images/month/2022_jul.jpg" alt="July slide"></figure></div></li> <li data-slide-to="7"><div><figure><img src="./images/month/2022_aug.jpg" alt="August slide"></figure></div></li> <li data-slide-to="8"><div><figure><img src="./images/month/2022_sep.jpg" alt="September slide"></figure></div></li> <li data-slide-to="9"><div><figure><img src="./images/month/2022_oct.jpg" alt="October slide"></figure></div></li> <li data-slide-to="10"><div><figure><img src="./images/month/nov.jpg" alt="November slide"></figure></div></li> <li data-slide-to="11"><div><figure><img src="./images/month/dec.jpg" alt="December slide"></figure></div></li> </ul> </div> </section> |
CSS
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | .slider-demo-blog{ width:100%; position:relative; } /* slick slider customize */ .slick-slide{ height:auto; } /* topslide */ .eyecatch-inner{ width:100%; } .topslide-slider{ width:100%; margin:0; padding:0; } .topslide-slider li{ margin:0; border:solid 2px var(--main-color); } .topslide-slider li figure{ width:100%; padding-top:75%; margin:0; position:relative; overflow:hidden; } .topslide-slider li figure img{ width:100%; height:100%; object-fit:cover; object-position:center center; position:absolute; top:0; left:0; } /* indicators */ .indicators-inner{ display:block; width:100%; position:absolute; bottom:10px; left:0; } .indicators-slider{ width:100%; margin:0; padding:0; } .indicators-slider li{ margin:0 5px; border:solid 2px var(--main-color); } .indicators-slider li figure{ width:100%; padding-top:75%; margin:0; position:relative; overflow:hidden; } .indicators-slider li figure img{ width:100%; height:100%; object-fit:cover; object-position:center center; position:absolute; top:0; left:0; } @media(min-width:768px){ .indicators-slider li figure{ width:100%; padding-top:60%; } .indicators-slider li{ margin:0 10px; } } |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | jQuery('.topslide-slider').slick({ centerMode:false, autoplay:true, autoplaySpeed:5000, dots:false, slidesToShow:1, arrows:false, asNavFor:'.indicators-slider' }); jQuery('.indicators-slider').slick({ centerMode:true, autoplay:true, autoplaySpeed:5000, dots:false, slidesToShow:3, arrows:true, asNavFor:'.topslide-slider' }); |
2.Slickについて
slickは、jQueryベースのスライダーのライブラリです。カルーセルスライダーも実装できます。
本処理を実装するには、予めslickを読み込んでおく必要があります。
slickについては、以下のサイトからダウンロードして下さい。
http://kenwheeler.github.io/slick/
【get it now】→【Download Now】
でダウンロードします。
ダウンロード後、圧縮ファイルを解凍して下さい。今回は、以下のファイルを使います。
slick-theme.css
slick.css
slick-min.js
3.Wordpressで読み込み
お使いのテーマのフォルダにコピーし、functions.phpに読み込み処理を記載します。
ここでは一例を記載します。
1 2 3 4 5 6 7 8 9 10 | add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'slick-theme-style', get_stylesheet_directory_uri() . '/slick-theme.css'); wp_enqueue_style( 'slick-style', get_stylesheet_directory_uri() . '/slick.css'); } add_action('wp_print_scripts', 'add_scripts'); function add_scripts() { wp_enqueue_script( 'slick', get_stylesheet_directory_uri() . '/slick.min.js', array( 'jquery' ), 'v1.8.1', true ); } |
本ブログの「1.デモ」でも記載している通り、asNavForのパラメータを使う事で、スライドを他のスライダのナビゲーションとして設定ができます。(その他のパラメータについては、公式サイトをご確認下さい。)
asNavForパラメータ
初期値:NULL
type:string
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | jQuery('.topslide-slider').slick({ centerMode:false, autoplay:true, autoplaySpeed:5000, dots:false, slidesToShow:1, arrows:false, asNavFor:'.indicators-slider' /* here */ }); jQuery('.indicators-slider').slick({ centerMode:true, autoplay:true, autoplaySpeed:5000, dots:false, slidesToShow:3, arrows:true, asNavFor:'.topslide-slider' /* here */ }); |
以上、皆さまのお役に立てれば幸いです。
WEB DESIGN全てお任せ！ホームページ制作
RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。
「全てお任せ！ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。
運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。
しかもなんと、「全てお任せ！ホームページ制作」は、￥100,000！で提供しております。
本業が忙しい中小企業様に大変ご好評を頂いている商品です。
独自ドメイン取得
サーバー開設＆設定
レイアウト設計
レスポンシブルデザイン
(*1)
検索エンジン最適化
(SEO対策)
場所Maps
お問い合わせフォーム
SSL化
各種SNS連携
運用マニュアル
