【48:スライダーまとめ】いろんなスライダープラグインを使ってみた
プロジェクトNo.48:スライダーまとめ - DEMO
何かとよく使うスライダーのJQueryプラグインを汎用性が高いものから個性的なものまで色々使ってみました。
万能タイプ
bxSlider
公式 : jQuery Content Slider | Responsive jQuery Slider | bxSlider
GitHub - GitHub - stevenwanderski/bxslider-4: Responsive jQuery content slider
特徴:導入の敷居は低く、レスポンシブとループ機能が少々扱いづらい。
FlexSlider
公式 : http://flexslider.woothemes.com//
GitHub : GitHub - woocommerce/FlexSlider: An awesome, fully responsive jQuery slider plugin
特徴:機能面はbxSliderとほぼ同じ。
swiper
公式 : Swiper - The Most Modern Mobile Touch Slider
GitHub : GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions
特徴:bxSlider、FlexSliderより機能が豊富。
slick.js
公式 : slick - the last carousel you'll ever need
GitHub : GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions
特徴:swiperよりさらに機能が豊富、人気がある。
個性派タイプ
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
特徴:下部のナビゲーションがタイトルとプレビューになっている
Slicebox
関連記事 : Slicebox - A fresh 3D image slider with graceful fallback
GitHub : GitHub - codrops/Slicebox: Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don't support the new properties.
特徴:縦に割れる3Dエフェクト。
Modern Slide In
公式 : Rotating Image Slider with jQuery
特徴:背景透過の画像を使うといい感じ。レスポンシブにも対応。