jQuery
【jQuery】レスポンシブスライダーを作成するプラグインfadeSlider
June 28, 2017

fadeSliderはレスポンシブスライダーを作成するjQueryプラグイン。メジャーブラウズをサポートし、サイズは7kbに縮小、カスタマイズ可能なサポートオプション6つのエフェクトがサポートされています。
リンクファイル
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="fadeslider.min.js"> </script>
マークアップ
<ul id="slider"> <li><img src="1.jpg" alt="" data-content=""></li> <li><img src="2.jpg" alt="" data-content=""></li> <li><img src="3.jpg" alt="" data-content=""></li> </ul>
CSS
<link href="css/style.css" rel="stylesheet" type="text/css" />
スライドショーをフックアップ
<script> $(document).ready(function() { $('#slider').fadeslider(); }); </script>
オプションカスタマイズ
$('#slider').fadeslider({ autostart : true, //Start play slider automatically, true or false duration : 3000, //Time between slider transitions(milliseconds) bullet: true, //Show bullets true or false bulletthumb: true, //Show bullet thumbs popup, true or false buttons: true, //Show next and prevoius buttons, true or false description: true, //Show caption of the image, true or false effets: 'all', //Select effets single by name or all, default is all and others are slideFromLeft, slideFromRight, slideFromTop, slideFromBottom mousehoverpause: false //Pause when hovering slider, true or false });