jQuery

要素アニメーションしながら表示出来るコンテンツスライダーDevrama Slider使い方

devrama-slider

今回は、要素アニメーションしながら表示出来るjQueryプラグインコンテンツスライダー【Devrama Slider】の使い方のご紹介です。

こちらのコンテンツスライダーは、高機能でいてレスポンシブにも対応していますし、画像・HTMLもスライド表示が可能となっています。
さらにこれは、僕が個人的に探していた機能ですが、テキストをスライドした画像の上に表示させ、順番に表示させることも出来ます。
このテキストの位置や表示スピードなどはHTML側設定が出来ますので、大変ありがたいjQueryプラグインなんです。

また、スライド中のアニメーションも豊富で【Fade/Split/Door/Wave】などの設定が出来ますし、通常のスライダーとして実装もとても簡単に実装出来ます。

実際にこちらのjQueryプラグイン【Devrama Slider】を使ったスライダーデモサイトもご用意したので、ご参考頂ければと思います。
デモサイトでは、デフォルトとカスタマイズのスライダーを表示しています。

デモサイト

実際にこちらのプラグインを利用する場合は、下記ダウンロード先よりファイルをダウンロードして下さい。

Devrama Slider

Devrama Slider 使い方

それでは、実際に【Devrama Slider】の使い方を説明していきたいと思います。
実装するにあたりこちらより必要なファイルなどをダウンロードして下さい。

必要ファイルの読み込み

まず最初に、jQuery本体と上記でダウンロードした【jquery.devrama.slider.js】をhead内に読み込みます。
下記の読み込み時の階層などは、ご自身の環境に合わせて下さい。

※jQuery本体のバージョンは、【1.8.0】を読み込んで下さい。
1.8.0以降を読み込むと動作しません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/jquery.devrama.slider.js"></script>

HTML

次にHTMLを記述していくのですが、img要素の記述の仕方が通常とは違い【data-lazy-src】で出力するので、ご注意下さい。

<div id="my-slide">
	<img data-lazy-src="img/img-01.jpg">
	<img data-lazy-src="img/img-02.jpg">
	<img data-lazy-src="img/img-03.jpg">
	<img data-lazy-src="img/img-04.jpg">
	<img data-lazy-src="img/img-05.jpg">
</div>

JavaScript

次に上記のID名を指定します。
下記は、デフォルトの状態で利用しています。

<script type="text/javascript">       
    $(document).ready(function(){
        $('#my-slide').DrSlider();
    });
</script>

上記まで記述が完了しましたら【Devrama Slider】の実装完了となります。
万が一上手く動かなかったりした場合は、jQuery本体のバージョンを確認し1.8.0を読み込んでいるか確認してみてください。

実際にこちらのjQueryプラグイン【Devrama Slider】を使ったスライダーデモサイトもご用意したので、ご参考頂ければと思います。
デモサイトでは、デフォルトとカスタマイズのスライダーを表示しています。

デモサイト

また、下記URLよりオプション・カスタマイズの設定なども確認頂けます。

Devrama Slider オプション

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

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

About

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

関連記事

コメント

コメントをどうぞ

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

PREVIOUS post-expirator0

投稿記事を期間限定で公開出来るWordPressプラグイン【Post Expirator】

NEXT wppolls

WordPressにアンケートフォームを実装 WP-Polls