jquery-imageslider-js

Created: 2014-05-18 14:05
Updated: 2014-05-22 01:18
License: mit

README.md

jquery-imageslider-js

Image Slider like "Ticker"

ティッカーふうに左右に流れるタイプのイメージスライダーです。

デモ - Demo

Demo Page

サンプル - Usage

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.imageslider.js"></script>
<script>
$(function() {
	$('.js-imageslider').imageslider({
		slideItems: '.item',
		slideContainer: '.list',
		slideDistance: 5,
		slideDuratin: 800,
		resizable: true
	});
});
</script>
</head>
<body>
<div class="js-imageslider">
<ul class="list">
<li class="item"><img src="hoge.jpg" alt=""></li>
<li class="item"><img src="foo.jpg" alt=""></li>
<li class="item"><img src="bar.jpg" alt=""></li>
</ul>
<!-- /.js-imageslider --></div>
</body>

オプション - Options

  • slideItems: スライドさせる要素を指定します
  • slideContainer: スライドさせる要素の親要素を指定します
  • slideDistance: スライドする距離を指定します(px)
  • slideDuration: スライドする速さを指定します(ms)
  • resazable: 横幅の可変に対応します
  • reverse: スライドする方向を左->右にします(通常時は右->左)
  • pause: スライダーのホバー時にスライドを止めることができます

クレジット - Credit

Copyright 2014 Sato Daiki.

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more