jQuery

【jQuery】カスタマイズ可能なスライダーを作成Slidizle

July 12, 2018
jQuery.slidizle

jQuery.slidizleはカスタマイズ可能なスライダーを作成できます。HTML要素にいくつかのクラスを適用するだけでスライダーを管理し、スライダーの外観を制御できます。

Get Started

スクリプトとcssをページにインクルード

<script src="jquery.js"></script>
<script src="jquery.slidizle.js"></script>

The html part

スライダーを記述するためのHTML。slidizle属性が必要になります。

<div class="my-cool-slider" data-slidizle>
	
	<ul class="my-cool-slider-content" data-slidizle-content>
		<li class="my-cool-slide">
			Hello world
		</li>
		<li class="my-cool-slide">
			Hello world
		</li>
		<li class="my-cool-slide">
			Hello world
		</li>
	</ul>

	<ul class="my-cool-navigation" data-slidizle-navigation>
		<!-- automagically filled with some li for your navigation -->
		<!-- can be custom too (cf. sample index.html) -->
	</ul>

	<button class="my-cool-next-button" data-slidizle-next>Next</button>
	<button class="my-cool-previous-button" data-slidizle-next>Previous</button>

</div>

The javascript part

通常のjQueryプラグインとして使用する

jQuery(function($) {

	// init slidizle on all data-overlizle elements
	var $sliders = $('[data-slidizle]').slidizle();

	// you can pass options directly at instanciation like this
	var $sliders = $('[data-slidizle]').slidizle({
		pauseOnHover : true,
		timeout : 5000
		// etc...
	});

// use the api through jquery element
$sliders.filter(':first').slidizle('next');

// get the api from element and use it :
var api = $sliders.filter(':first').data('slidizle_api');
api.next();

オブジェクトとして使用する

// instanciate slidizle :
var mySlider = new Slidizle($('#mySlider'), {
	timeout : 5000
	// etc...
});

// using the api :
mySlider.goto(2); // go to slide with index 2 (mean third slide)
// etc...

Options

classes : {
				
	// class applied on content wrrapper
	content 				: 'slidizle-content', 	

	// class applied on next navigation element		
	next 					: 'slidizle-next',			
	
	// class applied on previous navigation element
	previous 				: 'slidizle-previous',			
	
	// class applied on all slides that are before the active one
	beforeActive 			: 'before-active',

	// class applied on all slides that are after the active one
	afterActive 			: 'after-active',

	// class applied on the next active slide
	nextActive 				: 'next',

	// class applied on the previous active slide
	previousActive 			: 'previous',

	// class applied on container when the slider is in forward mode
	forward 				: 'forward',

	// class applied on container when the slider is in backward mode
	backward 				: 'backward',			

	// class applied on navigation element
	navigation 				: 'slidizle-navigation',			
	
	// class applied on timer element
	timer 					: 'slidizle-timer', // not documented		
	
	// class applied on each slide
	slide 					: 'slidizle-slide',			
	
	// class applied on the next and previous navigation, or the all slider when disabled
	disabled 				: 'disabled',				
	
	// the class applied on container when the slider is at his first slide
	first 					: 'first',

	// the class applied on container when the slider is at his last slide
	last 					: 'last',

	// the play class applied on the container
	play 					: 'played',				
	
	// the pause class applied on the container
	pause 		 			: 'paused',				
	
	// the stop class applied on the container
	stop 					: 'stoped',				
	
	// an class to access the slider
	slider 					: 'slidizle',				
	
	// the className to add to active navigation, slides, etc...
	active 					: 'active',				
	
	// the className to add to the slider and slides when it is in loading mode
	loading 				: 'loading'				
},					

// the slider interval time between each medias
timeout					: null,

// set if the slider has to make pause on mouse hover
pauseOnHover				: false,						

// set if the slider has to go next on mouse click
nextOnClick 				: false,						

// set if the slider has to go first item when next on last
loop 					: false,						

// set if the slider has to play directly or not if a timeout is specified
autoPlay				: true,						

// activate or not the keyboard
keyboardEnabled  			: true,						

// activate or not the touch navigation for mobile (swipe)
touchEnabled 				: true, 										

// specify if need to load the next content before the transition
loadBeforeTransition 			: true, 						

// specify if the slider is disabled or not (can be a function that return true or false)
disabled 				: false,

// callback when the slider is inited
onInit					: null,						

// callback when a slide is clicked
onClick					: null,						

// callback before the slider change from one media to another
beforeChange 				: null,

// callback when the slider change from one media to another
onChange				: null,						

// callback after the slider change from one media to another
afterChange  				: null,

// callback before the slider begin to load the slide
beforeLoading 				: null,

// callback during the loading progress
onLoading 				: null,

// callback after the slider has loaded the next slide (before the actual change)
afterLoading 				: null,

// callback when the slider change for the next slide
onNext					: null,						

// callback when the slider change for the previous slide
onPrevious				: null,						

// callback when the slider change his state to play
onPlay					: null,						

// callback when the slider change his state to pause
onPause				: null,						

// callback when the slider resume after a pause
onResume 				: null	

Advanced usage

Custom navigation

<div class="my-cool-slider" data-slidizle>
	
	<ul class="my-cool-slider-content" data-slidizle-content>
		<li class="my-cool-slide">
			Hello world
		</li>
		<li class="my-cool-slide">
			Hello world
		</li>
		<li class="my-cool-slide">
			Hello world
		</li>
	</ul>

	<ul class="my-cool-navigation" data-slidizle-navigation>
		<li>Navigation item 1</li>
		<li>Navigation item 2</li>
		<li>Navigation item 3</li>
	</ul>

</div>