Weblasts

『slick』を応用したタブ切り替えのサンプルと実装方法

slickを応用したタブ切り替え

slickのオプションまとめたときに思い付いたslickのオプションを使ってタブ切り替えを実装してみました。

ちょっと詰めが甘い点もありますが、結構お手軽でレスポンシブにも対応しているし、工夫次第では応用できそうなので書き残しておきます。

slickでタブ切り替えを実装

まずはサンプルから

スライダーのサイズによって表示するタブの数を変更しています。

SAMPLE slickでタブ切り替え
  • TAB①
  • TAB②
  • TAB③
  • TAB④
  • TAB⑤
  • TAB① NEWS①
  • TAB① NEWS②
  • TAB① NEWS③
  • TAB① NEWS④
  • TAB① NEWS⑤
  • TAB② NEWS①
  • TAB② NEWS②
  • TAB② NEWS③
  • TAB② NEWS④
  • TAB② NEWS⑤
  • TAB③ NEWS①
  • TAB③ NEWS②
  • TAB③ NEWS③
  • TAB③ NEWS④
  • TAB③ NEWS⑤
  • TAB④ NEWS①
  • TAB④ NEWS②
  • TAB④ NEWS③
  • TAB④ NEWS④
  • TAB④ NEWS⑤
  • TAB⑤ NEWS①
  • TAB⑤ NEWS②
  • TAB⑤ NEWS③
  • TAB⑤ NEWS④
  • TAB⑤ NEWS⑤

ベースのHTML

HTMLでタブ用のスライダーと表示するコンテンツ用スライダーの2つを実装するのでこのような形になります。

タブ用のスライダーと表示するコンテンツ用スライダーのスライドの数は合わせておきましょう

slickのオプション

slickのオプションは以下の通りに設定しました

コメントで「※ + 数値」が付いているものは下のほうに説明を付けています

※1 矢印アイコンはスライダーが大きいサイズの時は非表示にし、サイズが小さくなったときに出現するようにしています

※2 2つのスライダーを連携させています

※3 スライダーのサイズによって表示するタブの数を変更しています

※4 前へ/次へのボタンをカスタマイズするためのオプションです

※5 デモは2カラムレイアウトからワンカラムレイアウトに変わるサイトで表示しているのでレスポンシブの判断基準をスライダーのサイズにしています

※6 レスポンシブの設定です

参考CSS

CSSは適当に作ったものなのであまりあてにならないかもですが、参考に乗せています。
自由にカスタマイズしていただければと思います。