Reference | jQuery.jcflick

仕様

jQueryのプラグインとして開発してあります。下記のように読み込むことで簡単に実装できます。
下記はフリックのみの例です。

jQuery.jcflick

jQuery.slide-effect

jQuery.hogehoge

<html lang="ja">
<head>
<link rel="stylesheet" href="/responsive/resources/css/jquery-jcflick.css" media="all" type="text/css">
<script type="text/javascript" src="/responsive/resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/responsive/resources/js/jquery-jcflick-min.js"></script>
<script type="text/javascript">
$(function(){
	$('#flickDemo').jcflick({
		//============================================================
		//ここは固定の要素なので必ず指定してください。
		//プロパティの値を変更するのは自由です。
		//------------------------------------------------------------
		flickContainer: 'flickContainer',
		flickWrapper: 'flickWrapper',
		flickCol: 'flickCol',
		//------------------------------------------------------------
		//ここはオプションです。必要に応じて指定してください。
		//------------------------------------------------------------
		autoChange: true
	});
});
</script>
</head>
<body>
<div id="flickDemo">
	<!-- flick -->
	<div class="flickContainer"><div class="flickWrapper">
		<div class="flickCol">
			<!-- マークアップ自由です -->
			<p>1つめのコンテンツ</p>
		</div>
		<div class="flickCol">
			<!-- マークアップ自由です -->
			<p>2つめのコンテンツ</p>
		</div>
		<div class="flickCol">
			<!-- マークアップ自由です -->
			<p>3つめのコンテンツ</p>
		</div>
	</div></div>
</div>
</body>

実装例

実装方法

自動スライド(5000ミリ秒切り替え) + コンテンツの現在地を表示

使用オプション
flickLamp
autoChange
autoTimer

jQuery.jcflick

jQuery.slide-effect

jQuery.hogehoge

<div id="flickDemo1">
	<!-- flick -->
	<div class="flickContainer"><div class="flickWrapper">
		<div class="flickCol">
			<p><a href="#"><img src="/responsive/resources/images/main_jcflick.png" width="100%" alt="jQuery.jcflick"></a></p>
		</div>
		<div class="flickCol">
			<p><a href="#"><img src="/responsive/resources/images/main_slideEffect.png" width="100%" alt="jQuery.slide-effect"></a></p>
		</div>
		<div class="flickCol">
			<p><a href="#"><img src="/responsive/resources/images/main_hogehoge.png" width="100%" alt="jQuery.hogehoge"></a></p>
		</div>
	</div></div>
	
	<!-- flickLamp -->
	<div class="flickLamp"></div>
	<!-- /.flickLamp -->
</div>
<script type="text/javascript">
	$('#flickDemo1').jcflick({
		//init
		flickContainer: 'flickContainer',
		flickWrapper: 'flickWrapper',
		flickCol: 'flickCol',
		
		//conf
		flickLamp: 'flickLamp',
		autoChange: true,
		autoTimer: 5000
	});
</script>

コンテンツの現在地を表示 + ボタンクリックでコンテンツを切り替える

使用オプション
flickLamp
flickBtn
flickBtnNextName
flickBtnBackName

jQuery.jcflick

jQuery.slide-effect

jQuery.hogehoge

<div id="flickDemo2">
	<!-- flick -->
	<div class="flickContainer"><div class="flickWrapper">
		<div class="flickCol">
			<p><a href="#"><img src="/responsive/resources/images/main_jcflick.png" width="100%" alt="jQuery.jcflick"></a></p>
		</div>
		<div class="flickCol">
			<p><a href="#"><img src="/responsive/resources/images/main_slideEffect.png" width="100%" alt="jQuery.slide-effect"></a></p>
		</div>
		<div class="flickCol">
			<p><a href="#"><img src="/responsive/resources/images/main_hogehoge.png" width="100%" alt="jQuery.hogehoge"></a></p>
		</div>
	</div></div>
	
	<!-- flickLamp -->
	<div class="flickLamp"></div>
	<!-- /.flickLamp -->
	
	<!-- flickBtn -->
	<div class="flickBtn"></div>
	<!-- /.flickBtn -->
</div>
<script type="text/javascript">
	$('#flickDemo2').jcflick({
		//init
		flickContainer: 'flickContainer',
		flickWrapper: 'flickWrapper',
		flickCol: 'flickCol',
		
		//conf
		flickLamp: 'flickLamp',
		flickBtn: 'flickBtn',
		flickBtnNextName: 'Next',
		flickBtnBackName: 'Back'
	});
</script>

ドキュメント

第一引数にオブジェクトを渡すことでオプションを設定することができます。

autoChange
Type: Boolean 真偽値
Default: false

自動でコンテンツを切り替えます。有効（true）、無効（false）

$('#Element').jcflick({
	//init
	flickContainer: 'flickContainer',
	flickWrapper: 'flickWrapper',
	flickCol: 'flickCol',
	
	//conf
	autoChange: true
});
flickLamp
Type: Element, Selector名の文字列
Default: なし

コンテンツの現在地を表示します。デザインはCSSで変更できます。

$('#Element').jcflick({
	//init
	flickContainer: 'flickContainer',
	flickWrapper: 'flickWrapper',
	flickCol: 'flickCol',
	
	//conf
	flickLamp: 'flickLamp'
});
flickBtn
Type: Element, Selector名の文字列
Default: なし
flickBtnNextName
Type: String 文字列
Default: 'Next'
flickBtnBackName
Type: String 文字列
Default: 'Back'

ボタンクリックでコンテンツを切り替えます。

$('#Element').jcflick({
	//init
	flickContainer: 'flickContainer',
	flickWrapper: 'flickWrapper',
	flickCol: 'flickCol',
	
	//conf
	flickBtn: 'flickBtn',
	flickBtnNextName: 'Next',
	flickBtnBackName: 'Back'
});
flickCur
Type: Number 整数値
Default: 0

コンテンツのフリックスタート位置を任意に設定できます。0が最初です。コンテンツが3個あった場合、0 -> 1 -> 2 の順になります。

$('#Element').jcflick({
	//init
	flickContainer: 'flickContainer',
	flickWrapper: 'flickWrapper',
	flickCol: 'flickCol',
	
	//conf
	flickCur: 0
});

Copyright © funnythingz