jQuery

レスポンシブ対応jQueryプラグイン カルーセルスライダー Tikslus Carousel使い方

tiksluscarousel

今回は、レスポンシブにも対応したjQueryプラグイン【Tikslus Carousel】の使い方のご紹介です。
このプラグインは、カルーセルスライダーのプラグインとなっておりデフォルトの状態でレスポンシブにも対応しています。

実装もとても簡単で、デフォルトの状態でも十分利用できるカルーセルプラグインだと思います。
別にイメージスライダーとしても利用出来ると思いますし、フルスクリーンモードなどのオプションや、次/前のナビボタンを前後画像にするオプションも用意されています。
こちらのカルーセルプラグインは、【animate.css】を読み込みCSSファイルにCSS3のtransistionでオリジナルのアニメーションなどを記載すれば、オリジナルの切り替えエフェクトなどをオプションで指定して利用することが可能となっております。

僕自身CSS3のアニメーションって勉強不足であまり分からないので・・・割・愛させて頂きます。(勉強不足ですいません、CSS3のアニメーション勉強して、ためになりそうなこと記事にしたいと思います。)

今回、実際に【Tikslus Carousel】を利用したデモサイトも用意しましたので、是非ご覧ください。

デモサイト

実装に関しては、下記リンク先より必要ファイルなどを事前にダウンロードして下さい

Tikslus Carousel

Tikslus Carousel 実装方法

それでは、カルーセルスライダープラグイン【Tikslus Carousel】を実装方法を説明していきたいと思います。
実装するにあたりこちらより必要なファイルなどをダウンロードして下さい。

必要ファイルの読み込み

まずは、jQuery本体と上記でダウンロードした【tiksluscarousel.css】【tiksluscarousel.js】をhead内に読み込みます。
また、ダウンロードしたフォルダの中に.png画像やajax-loaderのgif画像があると思いますが、こちらの画像を利用する場合は【tiksluscarousel.css】と同じ階層(フォルダ内)に入れて下さい。
jQuery本体なのですが、jQueryのバージョンが、1.3.2以降だとこのプラグインが動作しませんので、1.3.2を読み込むかそれともダウンロードフォルダ内にある【jquery.min.js】を読み込んで下さい。
下記の読み込み時の階層などは、ご自身の環境に合わせて変更して下さい。

<link rel="stylesheet" href="css/tiksluscarousel.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tiksluscarousel.js"></script>

HTML

HTMLに関しては、至ってシンプルです。
今回は、プラグインを利用して5枚の画像を表示させ、最初の画像にだけキャプションを記載しています。

<div id="carousel">
	<ul>
		<li><img src="img/1.jpg" caption="キャプション" ></li>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/3.jpg"></li>
		<li><img src="img/4.jpg"></li>
		<li><img src="img/5.jpg"></li>
	</ul>
</div>

JavaScript

最後に、上記のdiv要素のID名:carouselを指定します。
今回は、デフォルトの状態で表示させます。

		<script type="text/javascript">
		$(document).ready(function(){
		$("#carousel").tiksluscarousel();
		});
		</script>

上記までを記載すれば、カルーセルプラグイン【Tikslus Carousel】の実装の完了です。
実際にTikslus Carouselを利用したデモサイトも用意しましたので、是非ご覧頂ければと思います。

デモサイト

Tikslus Carousel

カルーセルプラグイン【Tikslus Carousel】では様々なオプションが用意してあります。
その一部を下記に記載していますので、是非ご覧ください。

		<script type="text/javascript">
		$(document).ready(function(){
		$("#carousel").tiksluscarousel({
			prev:"", //前
			next:"", //次
			width:700, //幅
			height:433, //高さ
			nav:'thumbnails', // ナビの種類 dots or thumbnails
			current:1, //carouselが始まるn番目を指定
			type:'zoom', //画像が切り替わる際のエフェクトを指定
			navIcons:"true", //previous/nextを前後の画像に切り替える指定
			autoplayInterval:"5000", //自動スクロール時の時間指定
			animationInterval:"500", //スライド時のスピード
			customAnimationClassIn:'bounceIn', //カスタムCSS
			customAnimationClassOut:'bounceOut',//カスタムCSS
			
			});
		});
		</script>

デモサイト

オプションのtypeをzoomに設定すれば、目につくカルーセルスライダーにもなりそうですね。
上記デモサイトのカルーセルは、typeをzoomに設定してあります。
また、customAnimationClassInとcustomAnimationClassOutのパラメーターを利用するときは、【animate.css】を読み込み必要があり、typeをcustomに設定する必要もあります。
この他にも様々なオプションも用意してありますので、下記リンク先よりお確かめ下さい。

Tikslus Carousel オプション

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS wood-texture

ホームページの背景画像にも使えそうな木目・ウッド系テクスチャ パック 10+

NEXT cool-drop

クールでカッコイイドロップダウンメニューをCSSで実装する