nanameSlider Documentation（nanameSliderの使い方）

menu1｜menu2｜menu3

Give freedom to Web layout!
Use Skewy!
Skewy slider
Skewy slider

About nanameSlider（nanameSliderとは）

nanameSlider is the free and simple skew content slider jQuery plugin.

Overview（機能概要）

Uses native CSS3 translate3d and skewY
Slides can contain HTML content, or images
Fully responsive - adapt to any device
Mobile touch slider
Browser support: Firefox, Chrome, Safari, iOS, Android, IE11, Edge
Tons of configuration options
The MIT License

CSS3 translate3d アニメーションと、skewYで斜めに移動するスライダー
コンテンツ及び画像スライダー
レスポンシブ対応
タッチデバイス対応
モダンブラウザで動作（Firefox, Chrome, Safari, iOS, Android, IE11, Edgeなど）
豊富なオプション
MITライセンス

Demo Download

Setup（セットアップ）

1: Link required files

Include the script tag below in your document:

HTML

<head>
<link rel="stylesheet" href="yourpath/jquery.nanameSlider.css">
<script src="yourpath/jquery-2.2.0.min.js"></script>
<script src="yourpath/jquery.nanameSlider.js"></script>
</head>

2: Create HTML markup

Create <ul> element, with <li> for each slide.
Slides can contain any other HTML content, or images!

HTML

<ul class="slider1">
	<li>slide1</li>
	<li>slide2</li>
	<li>slide3</li>
</ul>

Usage（使い方）

3: Initiate（起動する）

Call .skewySlider() on <ul class="slider1">.
Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

JS

$('.slider1').skewySlider();

Call .skewySlider() with option

JS

$('.slider1').skewySlider({
	skewYangle : 10,
	pagerVisibility: false,
	beforeSelector: '.menuR',
	afterSelector: '.barR',
	slideDirection: 'right',
	autoPlay: true,
	autoPause: 4000,
	prevButtonTop: 10,
	pNiconfontLclass: 'icon-chevron-left',
	pNiconfontRclass: 'icon-chevron-right',
	nextButtonTop: -10,
});

4: Options（オプション）

variable（変数名）	Description（説明）	initial value/type（初期値/タイプ）
skewYangle	transformプロパティのskewY()。角度によってY軸への歪みをdegで指定	（初期値：-3）数値（小数点可）
beforeSelector	スライドの上にくる要素をクラス名かID名で指定 ※クラス名には「.」ドット、ID名には「#」シャープを付ける。 ※beforeSelectorに指定する要素は、スライド要素のすぐ上にある必要がある。	（初期値：''空）文字列
afterSelector	スライドの下にくる要素をクラス名かID名で指定 ※クラス名には「.」ドット、ID名には「#」シャープを付ける。 ※beforeSelectorに指定する要素は、スライド要素のすぐ下にある必要がある。	（初期値：''空）文字列
slideDirection	スライドの方向を'left'か'right'で指定	（初期値：'left'）文字列
autoPlay	スライドのオートプレイの有無をtrueかfalseで指定	（初期値：false）論理値
autoPause	スライドのオートプレイのポーズ時間をミリ秒で指定	（初期値：3000）数値
repeatMax	スライドのオートプレイのリピート数を指定	（初期値：10）数値
speed	スライドの移動（切替）時間を秒で指定	（初期値：0.35）数値
pagerVisibility	ページャーの表示の有無をtrueかfalseで指定	（初期値：true）論理値
pagerTop	スライドからページャーまでの隙間（padding）を指定	（初期値：10）数値
pNbuttonVisibility	スライドコントロール（前/次ボタン）の表示の有無をtrueかfalseで指定	（初期値：true）論理値
pNiconfontLclass	スライドコントロール（前ボタン）のクラス名を指定	（初期値：'icon-chevron-left'）文字列
pNiconfontRclass	スライドコントロール（次ボタン）のクラス名を指定	（初期値：'icon-chevron-right'）文字列
prevButtonTop	スライドの戻るボタンの上からの位置のアジャストを指定	（初期値：0）数値
nextButtonTop	スライドの進めるボタンの上からの位置のアジャストを指定	（初期値：0）数値
touchEnabled	TOUCH使用の有無をtrueかfalseで指定	（初期値：true）論理値

5: Customize（カスタマイズ）

CSSダミー

.header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.header h1 {
	margin-right: auto;
}