jQuery jCarouselスクリプト

• 四月 25, 2024

jQueryを使用すると、Webサイトに画像を簡単に追加できます。 MITおよび/またはGPLライセンスの下でリリースされたjQueryスクリプトが多数あります。これらのほとんどはプラグインアンドプレイ（プラグイン）スクリプトであり、Webサイトで使用したり、クライアントのサイトにインストールしたりするためにプログラミングの知識を必要としません。デザインサービスにjQueryスクリプトを追加することを検討してください。

Jan SorgallaによるそのようなjQueryスクリプトの1つがjCarouselです。このプラグインには、グラフィックスとテキストの両方の多くのアプリケーションがあります。スクリプトの主な機能は、コンテンツを水平または垂直にスクロールすることです。コンテンツは静的にすることも、Ajax、JavaScript、PHP、Flickrを介して動的にロードすることもできます。もちろん、この2番目のオプションでは、これらの言語に精通している必要があります。 jCarouselはThickbox 3でも機能するため、カルーセルでサムネイル画像をクリックすると、Thickboxに大きなサイズの画像が開きます。

スクリプトのコードのほとんどは、WebページのHeadセクションで参照されます。 jQueryライブラリとjCarouselソースコードとスタイルシートファイルが必要です。このプラグインの優れている点は、CSSによって「スキン」を作成して多くの外観を持つことができることです。スクリプトによってスクロールされるコンテンツは、基本的なULリストのWebページの本文に配置されます。

カスタムアニメーションの追加やイージングなど、スクリプトを構成するためのいくつかのオプションがあります。自動スクロールまたはナビゲーションボタンで機能します。もう1つの便利な機能は、カルーセルの幅がブラウザウィンドウに合わせて自動的にサイズ変更されることです。ブラウザのサイズに応じて、より多くの画像を表示するように構成したり、必要に応じて画像間の間隔を柔軟に設定した画像のセット数を設定したりできます。 1ページに複数のカルーセルを配置し、それぞれに異なるスキンを付けることができます。

FlickrフォトストリームとFlickr APIとの統合は、ほとんどのスクリプトには見られない素晴らしい機能です。悪名高いInternet Explorer 6を含むいくつかのブラウザーで動作することがテストされています。

Photoshopで作成できる単純なgifアニメーションの代わりにこれを使用する理由を自問するかもしれません。主な理由は、インストールされたカルーセルを簡単に更新できることです。異なる画像セットを取り上げる必要があるたびに新しいgifを作成するよりも、ULリストのコンテンツを切り替える方が簡単です。

//sorgalla.com/projects/jcarousel/

動画の説明: How to code a carousel with HTML, CSS and JavaScript - from scratch (part 1) (四月 2024).