CSSだけでもカルーセル表示、スライダーを作ることは可能ですが、やっぱり今一つ物足りないなんて感じられる事はないでしょうか？
そこで今回はjQueryを使用したくるくるスムーズに動く、カルーセルスライダーをご紹介します。
読み込みも早いですし、コード自体も軽いのでスマホでも全然読み込めます。
ぜひ参考にしてみてください。
目立つこと間違いなし！スライドするとフォントが可変する面白いカルーセル
See the Pen
Variable Fonts Experiment by Supremo (@SupremoHQ)
on CodePen.
ポートフォリオなどにピッタリなカルーセルスライダー
See the Pen
Agency website POC by Jamie Coulter (@jcoulterdesign)
on CodePen.
spotify風のカード型カルーセル
See the Pen
Horizontal Scroll Containers Mobile & Desktop – Spotify Style by Kilian So (@kilianso)
on CodePen.
Swiper.jsを使用したシンプルなカルーセルスライダー
See the Pen
Camera Showroom – Date 8 (24 days of animation) by januaryofmine (@januaryofmine)
on CodePen.
お客様の声風カルーセルスライダー
See the Pen
Testimonial Carousel Design by FinByz Tech Pvt. Ltd. (@finbyz)
on CodePen.
3D惑星カルーセルスライダー
See the Pen
3D planets directional slider / carousel VERSION 2 by Anya Melnyk (@slyka85)
on CodePen.
フリップカード型カルーセルスライダー
See the Pen
Flipping Card Slider by Jesús Castro (@gzuzkstro)
on CodePen.
面白い！GSAPを使用した3Dカルーセルスライダー
See the Pen
3D Carousel with GSAP by Cedrick (@Cedrick)
on CodePen.
マウスの動きに合わせて動くかつ背景画像も切り替わるカルーセルスライダー
See the Pen
Mouse driven carrousel concept by web-tiki (@web-tiki)
on CodePen.
クリックで動くシンプルなカルーセルスライダー
See the Pen
Custom Carousel by Collin Smith (@collinscode)
on CodePen.
マウススクロールに対応したカルーセルスライダー
See the Pen
Change direction from horizontal to vertical SWIPER SLIDER by Mehul Rojasara (@Mehul_Rojasara)
on CodePen.
シンプルなカード型カルーセルスライダー
See the Pen
Simple photo carousel by Alex Bratsos (@slack)
on CodePen.
垂直型自動的に切り替わるカルーセルスライダー
See the Pen
Vertical carousel with TweenMax.js by Danil Goncharenko (@Danil89)
on CodePen.
