one's way blog

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

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

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 shutdown
特徴:額に入れたようなナビゲーション。

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 : https://github.com/ismailakdogan/ElasticSlideshow/
特徴:エラスティック・レイアウト対応のスライダー。サムネイルナビゲーションと文字のアニメーションも特徴的。

CircleNavigationEffect

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

Modern Slide In

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

全ソースはこちら

github.com