読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【48:スライダーまとめ】いろんなスライダープラグインを使ってみた

one's wayプロジェクト JQuery

f:id:seintoseiya:20160302202914p:plain
プロジェクトNo.48:スライダーまとめ - DEMO

何かとよく使うスライダーのJQueryプラグインを汎用性が高いものから個性的なものまで色々使ってみました。

万能タイプ

bxSlider

公式 : jQuery Content Slider | Responsive jQuery Slider | bxSlider

GitHub - GitHub - stevenwanderski/bxslider-4: Responsive jQuery content slider
特徴:導入の敷居は低く、レスポンシブとループ機能が少々扱いづらい。

個性派タイプ

RhinoSlider

公式 : Rhinoslider: The most flexible jQuery slider/slideshow
特徴:額に入れたようなナビゲーション。

Windy

URL : Windy: A Plugin for Swift Content Navigation
GitHub : GitHub - codrops/Windy: A jQuery Plugin for Swift Content Navigation
特徴:トランプが飛んでいくようなエフェクト。

ElasticSlideshow

関連記事 : Elastic Image Slideshow with Thumbnail Preview
GitHub : GitHub - ismailakdogan/ElasticSlideshow: Elastic Image Slideshow with Thumbnail Preview
特徴:エラスティック・レイアウト対応のスライダー。サムネイルナビゲーションと文字のアニメーションも特徴的。

CircleNavigationEffect

公式 : Circle Navigation Effect with CSS3
特徴:下部のナビゲーションがタイトルとプレビューになっている

Modern Slide In

公式 : Rotating Image Slider with jQuery
特徴:背景透過の画像を使うといい感じ。レスポンシブにも対応。

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート