ブログBlog

スライダーを別のスライダーと同期して表示

今回は、トップページのスライドで実装した例となります。1つはアイキャッチ用のスライダー、もう一つはナビゲーション用のカルーセルスライダーを準備し、表示内容は同じスライドで、かつ、この2つのスライダーを同期させてスライド表示する際の実装例です。

使っているのは、jQueryベースのスライダーで世界的に有名なslickを使っています。

1.デモ

  • January slide
  • February slide
  • March slide
  • April slide
  • May slide
  • June slide
  • July slide
  • August slide
  • September slide
  • October slide
  • November slide
  • December slide
  • January slide
  • February slide
  • March slide
  • April slide
  • May slide
  • June slide
  • July slide
  • August slide
  • September slide
  • October slide
  • November slide
  • December slide

 

月を表した画像12枚をスライド表示しています。

HTML

 

CSS

 

JS

 

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に読み込み処理を記載します。
ここでは一例を記載します。

 

4.asNavForパラメータを使う

本ブログの「1.デモ」でも記載している通り、asNavForのパラメータを使う事で、スライドを他のスライダのナビゲーションとして設定ができます。(その他のパラメータについては、公式サイトをご確認下さい。)

asNavForパラメータ

初期値:NULL
type:string

 

以上、皆さまのお役に立てれば幸いです。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU