「複数画像スライダープラグイン【Swiper.js】」に続き、slick.jsを使って、レスポンシブやスマホ・タブレットのスワイプに対応した複数画像スライダープラグインをご紹介します。
Contents
ディスプレイ広告
slick.jsを使った、複数画像スライダープラグインのCSS記述
※slick.css、slick-theme.cssファイルを読み込みます。その他、必要に応じて書き換えてください。
<link rel="stylesheet" type="text/css" href="./slick/slick.css"> <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css"> <style type="text/css"> html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .slider { width: 50%; margin: 100px auto; } .slick-slide { margin: 0px 20px; } .slick-slide img { width: 100%; } .slick-prev:before, .slick-next:before { color: black; } .slick-slide { transition: all ease-in-out .3s; opacity: .2; } .slick-active { opacity: .5; } .slick-current { opacity: 1; } </style>
slick.jsを使った、複数画像スライダープラグイン、スライダー箇所のHTML記述
※スライダー2パターン(class=”regular slider”、class=”center slider”)を用意しました。スライダーエリアに複数のjpg画像(1.jpg ~ 9.jpg)を設定してます。必要に応じて書き換えてください。
<section class="regular slider"> <div> <img src="1.jpg"> </div> <div> <img src="2.jpg"> </div> <div> <img src="3.jpg"> </div> <div> <img src="4.jpg"> </div> <div> <img src="5.jpg"> </div> <div> <img src="6.jpg"> </div> </section> <section class="center slider"> <div> <img src="1.jpg"> </div> <div> <img src="2.jpg"> </div> <div> <img src="3.jpg"> </div> <div> <img src="4.jpg"> </div> <div> <img src="5.jpg"> </div> <div> <img src="6.jpg"> </div> <div> <img src="7.jpg"> </div> <div> <img src="8.jpg"> </div> <div> <img src="9.jpg"> </div> </section>
slick.jsを使った、レスポンシブやスマホ・タブレットのスワイプに対応した複数画像スライダープラグインのJavaScript記述
※jquery-2.2.0.min.js、slick.jsファイルを読み込みます。$(スライドエリア).slick({オプション})を記述します。オプションにはスライド枚数や切替り演出等の設定が可能です。
「ソース元:slick – the last carousel you’ll ever need」をご参考下さい。必要に応じて書き換えてください。
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script> <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).on('ready', function() { $(".regular").slick({ dots: true, infinite: true, slidesToShow: 3, slidesToScroll: 3 }); $(".center").slick({ dots: true, infinite: true, centerMode: true, slidesToShow: 5, slidesToScroll: 3 }); }); </script>
複数画像スライダーslick.jsのデモページ
ソース元:slick – the last carousel you’ll ever need
ソース元は以下の通りです。
slick – the last carousel you’ll ever need
※流用される場合は自己責任でお願いします。