『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つを実装するのでこのような形になります。
タブ用のスライダーと表示するコンテンツ用スライダーのスライドの数は合わせておきましょう
|
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 |
<div class="tab"> <ul class="tab_list"> <li>TAB①</li> <li>TAB②</li> <li>TAB③</li> <li>TAB④</li> <li>TAB⑤</li> </ul> <div class="tab_content"> <ul class="tab_item"> <li>TAB① NEWS①</li> <li>TAB① NEWS②</li> <li>TAB① NEWS③</li> <li>TAB① NEWS④</li> <li>TAB① NEWS⑤</li> </ul> <ul class="tab_item"> <li>TAB② NEWS①</li> <li>TAB② NEWS②</li> <li>TAB② NEWS③</li> <li>TAB② NEWS④</li> <li>TAB② NEWS⑤</li> </ul> <ul class="tab_item"> <li>TAB③ NEWS①</li> <li>TAB③ NEWS②</li> <li>TAB③ NEWS③</li> <li>TAB③ NEWS④</li> <li>TAB③ NEWS⑤</li> </ul> <ul class="tab_item"> <li>TAB④ NEWS①</li> <li>TAB④ NEWS②</li> <li>TAB④ NEWS③</li> <li>TAB④ NEWS④</li> <li>TAB④ NEWS⑤</li> </ul> <ul class="tab_item"> <li>TAB⑤ NEWS①</li> <li>TAB⑤ NEWS②</li> <li>TAB⑤ NEWS③</li> <li>TAB⑤ NEWS④</li> <li>TAB⑤ NEWS⑤</li> </ul> </div> </div> |
slickのオプション
slickのオプションは以下の通りに設定しました
コメントで「※ + 数値」が付いているものは下のほうに説明を付けています
|
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 |
<script> $(function() { $('.tab_list').slick({ arrows: false,//※1 asNavFor: '.tab_content',//※2 focusOnSelect: true, slidesToShow: 5,//※3 infinite: false, speed: 400, cssEase: 'linear', prevArrow: '<span class="tab_prev"></span>',//※4 nextArrow: '<span class="tab_next"></span>',//※4 respondTo: 'slider',//※5 responsive: [{//※6 breakpoint: 600, settings: { arrows: true,//※1 slidesToShow: 4,//※3 } }, { breakpoint: 400, settings: { arrows: true,//※1 slidesToShow: 3,//※3 } }] }); $('.tab_content').slick({ arrows: false, asNavFor: '.tab_list',//※2 fade: true, }); }); </script> |
※1 矢印アイコンはスライダーが大きいサイズの時は非表示にし、サイズが小さくなったときに出現するようにしています
※2 2つのスライダーを連携させています
※3 スライダーのサイズによって表示するタブの数を変更しています
※4 前へ/次へのボタンをカスタマイズするためのオプションです
※5 デモは2カラムレイアウトからワンカラムレイアウトに変わるサイトで表示しているのでレスポンシブの判断基準をスライダーのサイズにしています
※6 レスポンシブの設定です
参考CSS
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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
.tab { max-width: 800px; margin: 0 auto; } .tab_list li { padding: 10px 0; cursor: pointer; text-align: center; } .tab_list li:first-child, .tab_content ul:first-child { background-color: #ffd9d9; } .tab_list li:nth-child(2), .tab_content ul:nth-child(2) { background-color: #fff3d9; } .tab_list li:nth-child(3), .tab_content ul:nth-child(3) { background-color: #f6ffd9; } .tab_list li:nth-child(4), .tab_content ul:nth-child(4) { background-color: #ddffd9; } .tab_list li:last-child, .tab_content ul:last-child { background-color: #d9fcff; } .tab_content ul { padding: 20px; list-style-type: none; margin: 0; } .tab_content ul li { list-style-type: none; margin-bottom: 10px; } .tab_list li:focus, .tab_content ul:focus { outline: none; } .tab_prev { display: none; width: 24px; height: 100%; background-color: rgba(126, 126, 126, 0.5); position: absolute; bottom: 0; left: 0; z-index: 8 } .tab_prev:after { content: ''; display: block; position: absolute; top: 50%; left: calc(50% - 8px); transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 13px 8px 0; border-color: transparent #000 transparent transparent; } .tab_next { display: block; width: 24px; height: 100%; background-color: rgba(126, 126, 126, 0.5); position: absolute; bottom: 0; right: 0; z-index: 8; } .tab_next::after { content: ''; display: block; position: absolute; top: 50%; right: calc(50% - 8px); transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #000; } .slick-disabled { display: none !important; } |
