Finally, A Responsive Content Slider
I was looking for a responsive content slider that could move any html content and images, but couldn’t find anything that I liked that was easy enough to use out of the box. Since I had previously written version 3 of the Coda Slider just a few months prior, I had the vision clearly laid out in my head as to what changes I needed to make.
I’ve branded it the Liquid Slider as opposed to an upgrade of the Coda Slider because I wanted to capture the essence of a fluid, or liquid design. I crafted the content slider so that it can easily adapt to varying screen sizes. And using @media queries, your content too will adjust as expected.
If you have responsive images or any html content that you want to organize in a tabbed slider, the Liquid Slider makes it easy. You can set it to be a full width content slider, or just keep it at a fixed maximum width. It’s very powerful and has a very open API.
I also included some tutorials on the download page to demonstrate some of the more advanced features. I hope you find it useful!
I added a bunch of useful features that build upon the Coda Slider. Here are some of them:
- Fade transitions
- CSS3 transitions with fallbacks
- Mobile-specific navigation
- Pause slider on hover
- Named hash-linking (i.e. example.com/#/about-me)
- #left and #right cross-linking options
- Ability to hide the left arrow on panel 1, and the right arrow on the last panel
- Keyboard Navigation
You can download the code directly from the main site. If you have any questions or want to show off your work, feel free to leave it in the comments.