jQuery

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

June 28, 2017

fadeSliderはレスポンシブスライダーを作成するjQueryプラグイン。メジャーブラウズをサポートし、サイズは7kbに縮小、カスタマイズ可能なサポートオプション6つのエフェクトがサポートされています。

Usage

リンクファイル

<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
 });