どや!?スキルを向上させるための便利なjQuery画像スライダー20

09 12月

  • このエントリーをはてなブックマークに追加

スキルを向上させるための便利なjQuery画像スライダー20

20 Useful jQuery Slider Tutorialsで収集されていた、画像スライダーを分かりやすくまとめました。それぞれデモサイトへのリンクを付けたので、気になったものがあれば動きを確認してみてください。
 

1. Automatic Image Slider

自動でスライドする画像スライダー。
シャープな動きかつシンプルで使い勝手が良さそうです。

Automatic Image Slider
デモ ダウンロード

2. jQuery image slider

手動で画像送りをしていくスライダー。
じっくり見る写真ギャラリー等のコンテンツに良さそう。

jQuery image slider
デモ ダウンロード

3. Slider Gallery with jQuery

写真のスライドインにインパクトがあります。
スクロールバーが付いているので、写真枚数が多いときは便利。

Slider Gallery with jQuery
デモ ダウンロード

4. Create an Image Rotator with Description

メニューがはっきりしていて見やすく、コーポレートサイトなんかで使えそう。
写真毎にテキストも追加できます。

Create an Image Rotator with Description
デモ ダウンロード

5. Slick and Accessible Slideshow Using jQuery

ダーク系のスライダー。スライドショー風なのでカスタマイズがしやすそうです。

Slick and Accessible Slideshow Using jQuery
デモ ダウンロード

6. JQuery Photo Slider with Semi Transparent Caption

画像の切り替わりとテキストの表示の仕方がシャープでカッコイイ。
ページ切り替えは自分でできないようです。

JQuery Photo Slider with Semi Transparent Caption
デモ ダウンロード

7. Panning Slideshow with jQuery

スライドのアニメーションが独特。

Panning Slideshow with jQuery
デモ ダウンロード

8. Create Beautiful jQuery slider

クールな画像スライダーで、スライドした後のコメントの表示がこっている。

Create Beautiful jQuery slider
デモ ダウンロード

9. Featured Content Slider Using jQuery

きっちりしたレイアウトなので、コーポレートサイトでも導入しやすそう。

Featured Content Slider Using jQuery
デモ ダウンロード

10. Mosaic Slideshow

アニメーションが格子に沿って順番に切り替わっています。
少し使いにくいかもしれません。

Mosaic Slideshow
デモ ダウンロード

11. Apple-like Slideshow Gallery

アップルサイトを感じさせる画像スライダー。シンプルで使いやすそうです。

Apple-like Slideshow Gallery
デモ ダウンロード

12. Slick Content Slider

スクロールバーを操作して、画像を見るスライダー。

Slick Content Slider
デモ ダウンロード

13. HTML5 Slideshow

HTML5で作られた手動の画像スライダー。

HTML5 Slideshow
デモ ダウンロード

14. How to Make a Slideshow with a Transparent PNG Frame

自動で画像が切り替わるシンプルな画像スライダー。

How to Make a Slideshow with a Transparent PNG Frame
デモ ダウンロード

15. Simple iTunes-like Slider

iTunes風のスライダー。少し使いにくそうな印象を受けました。。。

Simple iTunes-like Slider
デモ ダウンロード

16. Dynamic WordPress jQuery Featured Post Slider

画像スライダーからコンテンツページへ誘導させる用途で作られたもののようです。
細かいところまで作りこまれているので良さそう。

Dynamic WordPress jQuery Featured Post Slider
デモ ダウンロード

17. Content Slider

シンプルなので応用が効きそうです。

Content Slider
デモ ダウンロード

18. Slick Auto-Playing Featured Content Slider

良くある画像スライダーでこれも使えそう。

Slick Auto-Playing Featured Content Slider
デモ ダウンロード

19. Simple Image Slideshow

アルファを使って画像が切り替わるスライダーです。シンプルで良い感じ。

Simple Image Slideshow
デモ ダウンロード

20. Simple Content Slider

クールで人を引き付けそうなアニメーションです。

Simple Content Slider
デモ ダウンロード

トラックバック

  1. […] その他の良質なスライダーはこちらのまとめ記事が参考になります。 カテゴリー: EC-CUBE, ECサイト制作   タグ: EC-CUBE, […]


  2. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

コメントを残す

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


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL