jQuery

【jQuery】様々な形状の画像でも反応する非常にシンプルな画像スライダーSquare1

December 14, 2017
Square1 jQuery Slider

Square1 jQuery Sliderはどのようなサイズや形状の画像でも反応する非常にシンプルな画像スライダーです。

Installation

jQuery

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

JS & CSS

 <link rel="Stylesheet" href="square1/square1.min.css" type="text/css" />
 <script src="square1/square1.min.js"></script>

HTML
画像のリストからスライドショーを作成

<div class="slideshow">
 	<img src="image1.png" alt="Caption 1">
 	<img src="image2.png" alt="Caption 2">
 	<img src="image3.png" alt="Caption 3">
 </div>

または、スライドをHTMLコンテンツ要素として含める

 <div class="slideshow">
 	<div>
 		<img src="image1.png" alt="Caption 1">
 		<h3>Slide Title</h3>
 	</div>
 	<div>
 		<img src="image2.png" alt="Caption 2">
 		<h3>Slide Title</h3>
 	</div>
 	<div>
 		<img src="image3.png" alt="Caption 3">
 		<h3>Slide Title</h3>
 	</div>
 </div>

JS:

 $(function() {
 	$('.slideshow').square1();
 });

Slideshow Options

$('.slideshow').square1({
	slide_duration: 8000,
	dots_nav: 'hover'
});
width: 			$(_this).width(), 	// Sets slideshow width. Values: any specific measurement (px, em, vw, etc.) will work. Blank values will default to whatever size the CSS dictates.
height: 		$(_this).height(),  	// Sets slideshow height. Values: any specific measurement (px, em, vw, etc.) will work. Blank values will default to whatever size the CSS dictates.
fill_mode: 		'cover', 		// Determines how images fill slideshow. Values: 'contain', 'cover', or pixel/percent value
background:		'none',			// Set slideshow background color. Values: any CSS color or valid CSS background value
auto_start: 		true,			// Set whether slideshow autoplays or not. Values: true/false
start_delay: 		0, 			// If auto_start is true, set how long to wait before slideshow starts. Values: ms
slide_duration: 	4000, 			// Amount of time each slide is shown before progressing to next. Values: ms
transition_time: 	500, 			// Amount of time it takes to transition from one slie to next. Values: ms
pause_on_hover: 	true,			// Pause autoplay if user hovers mouse over slideshow. Values: true/valse
keyboard: 		true,			// Allow users to control slideshow with arrow keys. Will automatically add slideshows into keyboard tab order. Values: true/valse
gestures: 		true,			// Allow users to control slideshow with touch gestures (swipe left/right). Values: true/valse
theme:			'dark',			// Set color palette of slideshow UI elements. Values: 'dark', 'light'
prev_next_nav: 		'inside', 		// How to display (or not) the arrow nav buttons. Values: 'inside', 'outside', 'hover', 'none'
dots_nav: 		'inside', 		// How to display (or not) the dot nav buttons. Values: 'inside', 'outside', 'hover', 'none'
caption: 		'outside', 		// How to display (or not) image captions. Values: 'inside', 'outside', 'hover', 'none'

// Callback functions
onPlay: 		function() {},
onStop: 		function() {},
onChange: 		function() {}

Slideshow Remote Control Functions

// Start slideshow
$('.slideshow').square1('play');

// Stop slideshow
$('.slideshow').square1('stop');

// Go to next slide
$('.slideshow').square1('next');

// Go to previous slide
$('.slideshow').square1('prev');

// Jump to slide N (or any integer);
$('.slideshow').square1(5);

MIT