agile-carousel

使い勝手が良さそうなスライダーを発見したのでご紹介です。 とてもシンプルなのですが、いろいろな機能を使うことが出来るので自分なりのスライダーが出来るのではないでしょうか?

jQuery『AGILE Carousel』

上記サイトへ行きますと、5つのサンプルが用意されています。

それぞれのサンプルはこちらから

それぞれのサンプルへ行きますと、コードサンプルが書かれています。

使い方

まず、ダウンロードします。 こちらへいくと、右の方にダウンロードボタンがあると思います。

GitHubで、管理(修正更新してるのかな?)しているため、ダウンロードは、GitHubからとなります。

画面右端にDownloadsがありますので、そこをクリックしていただくと、ZIPファイルがダウンロード出来ます。 となりにあるtar.gzは、Linux用ですのでお間違えなく。

余談ですが、Forkすると、こんな画面。。。!!??

かわいいですね。

話を戻して、ダウンロードが完了すると、以下のファイルが入っています。

  • agile_carousel.alpha.js
  • agile_carousel.css
  • agile_carousel_data.php
  • readme.txt

ここからの手順は、いつもどおりで、HEADER内にファイルを読み込ませ、

HTML

続けて必須項目を記述します。

HTML

必須項目は、以下のとおり

  • carousel_data
  • carousel_outer_height
  • carousel_height
  • slide_height
  • carousel_outer_width
  • slide_width

表示させたい場所に

HTML

と記述すれば、8割は完了しました。

では、あと2割は。。というと、実際に表示させるデータです。 データは、agile_carousel_data.phpへ記述します。

中を見てみますと、以下のように記述されているので、

これを自分の環境に合うように書き直せば完了です。

オプションを付け加えてカスタマイズしたりすれば、いろいろと変化が楽しめますね。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

トップへ戻る