Blog

様々な効果にできるイメージスライダー

今回は、様々な効果が簡単に設定できるイメージスライダーを紹介します。

サイトのメインビジュアル等に使用できるかと思います。

 

jQuery Cycle Plugin というプラグインです。

ダウンロード先は以下のURLから

JQuery Cycle Plugin

 

そして、実際に使用してみたデモは以下からご覧ください

 

DEMO

 

今回は、イージング効果をつけるため、そのプラグインも使用します。

 

jQuery Cycle Pluginの使い方

 

使用方法ですが、まずは、以下のファイルを読み込みます。

 

そして、あとはスライダーをさせたい箇所のidがmainImgであれば、

 

 

と設定するだけです。

実際は効果とか切り替えの速さを変更する必要があると思います。

それは下記のdemoの解説のソースをご覧ください。

 

htmlは、画像imgだけでもulのリストでも大丈夫です。

 

 

実際のDEMOのソースは下記になります。

 

js

 

html

 

cssは特に設定していません。

 

このように簡単にイメージスライダーが設定できます。

オプションも豊富で、「前へ」「次へ」も設置できるようです。

 

また、イージング効果もたくさんあるので、色々な表現ができます。

イージングのプラグインのサイトは以下から

jQuery Easing Plugin

実際に動きを試すこともできます。

 

このプラグインとは違ったスライダーも紹介していますので、

そちらもご覧ください。

 

コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ