スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。
ある時スライドをポップアップさせて動画を表示させる依頼がありました。
仕様としては
「ページャーには第○章と順に入れてね」
「スマホの時はページャーをドットにしてね」
というもので、やり方を調べて実装しました。以下備忘録です。
slickでページャーを変更できる「customPaging」
「customPaging」というオプションで自由に変更できます。
$('.c5-slider').slick({infinite:true,slidesToShow:1,slidesToScroll:1,draggable:false,arrows:true,prevArrow:'<span class="prev-arrow">前</span>',nextArrow:'<span class="next-arrow">次</span>',customPaging:function(slider,i){return$('<div class="c5-dots__num">').text('第'+(i+1)+'章');},dotsClass:'c5-dots',dots:true,});See the Pen slick__pager__1 by yoshida (@yoshi090) on CodePen.
数字を降順にする
「最新話を一番左にしたいから数字を逆にしてほしい」と言われたら。
<section><divclass="c5-slider_wrap"><ulclass="c5-slider"><liclass="c5-slider_content">
4章
</li><liclass="c5-slider_content">
3章
</li><liclass="c5-slider_content">
2章
</li><liclass="c5-slider_content">
1章
</li></ul><!-- /.c5-slider --></div><!-- /.c5-slider_wrap --></section>customPaging:function(slider,i,j){j=5;return$('<div class="c5-dots__num">').text('第'+(j-(i+1))+'章');}See the Pen slick__pager__2 by yoshida (@yoshi090) on CodePen.
途中に番外編を入れる
「ごめん、動画で２章番外編があるから４章と３章の間に入れてね」と言われたら。
<section><divclass="c5-slider_wrap"><ulclass="c5-slider"><liclass="c5-slider_content">
4章
</li><liclass="c5-slider_content">
2章番外編
</li><liclass="c5-slider_content">
3章
</li><liclass="c5-slider_content">
2章
</li><liclass="c5-slider_content">
1章
</li></ul><!-- /.c5-slider --></div><!-- /.c5-slider_wrap --></section>customPaging:function(slider,i,j){j=6;if(i>=0&&i<1){return$('<div class="c5-dots__num">').text('第'+(j-(i+2))+'章');}elseif(i==1){return$('<div class="c5-dots__num">').text('第2章番外編');}else{return$('<div class="c5-dots__num">').text('第'+(j-(i+1))+'章');}}See the Pen slick__pager__3 by yoshida (@yoshi090) on CodePen.
以上です。