Responsive CSS3 Any Content Slider (no JavaScript)
Click on the circular ◄ and ► arrow controls to slide more content in to view...
Features
A CSS-only, responsive content slider that;
- Can contain anything - images, text, whatever!
- Cycles continuously - doesn't stop at the last slide
- Uses CSS3 transitions to animate the slide effect (no JavaScript)
- Uses the "advanced checkbox hack" to trigger slides (for Android/iOS)
- Uses "translate3d" to force hardware acceleration in WebKit (no flicker)
Please view the source of this web page to grab the CSS and HTML markup.
Compatibility
- IE7+ (content accessible via horizontal scrollbar in IE7/8, controls but no slide effect in IE9) *
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
* Conditional styles have been provided to replace the arrow controls with a horizontal scrollbar in IE7/8.
I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything hinky.
Related
- Also see Responsive CSS3 Any Content Slider (no JavaScript) - text and images, but no nav pips
- Also see Responsive CSS3 Any Content Slider (no JavaScript) - text, images and nav pips
- Also see Responsive CSS3 Any Content Slider (with JavaScript auto-play and simple controls)
- Also see Responsive CSS3 Any Content Slider (with JavaScript auto-play, simple controls and nav pips)
- Also see Responsive CSS3 Any Content Slider (with JavaScript auto-play and large touch-toggle)
- Also see Responsive CSS3 Any Content Slider (with JavaScript auto-play, large touch-toggle and swipe support)
Freebies
Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.