We all know about the popularity of jQuery image and video sliders and carousels. For the most part they are all feature-rich and perfect in their own way, but very few of them have been built to accommodate non-image content (blocks of text) that would allow you to have, for example, a rotating featured content area or a popular post section. Why is that?
The good news is that we have managed to find 15 feature-rich jQuery plugins that do cater for non-image content. These plugins will allow you to organize, highlight and showcase your most important content in a sleek and stylish manner while at the same time allowing your readers to browse your content all within the same page.
Alright, let’s get to it. Here are the best jQuery sliders and carousels:
dualSlider features not one but two animations, hence the name. You can control whether the carousel starts automatically, the delay of each slide, the animation, and more.
bxSlider features multiple transition styles, displaying of and moving multiple slides at once, prev/next + pager + auto controls, random start, ticker mode, callback functions, styling options, and many more.
AnythingSlider combines a featured content, start/stop, and moving boxes slider into one, and throws in some new features to create a full-featured jQuery slider. It includes prev/next controls, navigation tabs, hashtags for each slide, multiple sliders, autoplay on hover, linking to slides from static text links, and a lot more.
SlideDeck is a SEO-friendly fully-featured stylish jQuery slider that includes a lot of customization options, full API access, many templates + skins + styling to choose from, vertical slides, video-ready, and more.
Start/Stop Slider is a simple slider that features a stop/start button, as the name implies. It also lets you add/remove panels. While it’s not a plugin, implementing it is fairly easy, and all of the code—as well as a download link to the files—is provided in the post.
This is a tutorial that shows you how to build a content slider with jQuery. The content slider is easy to implement, you can use multiple instances of it on a single page, and you can customize the size, button images, and such. All of the code and a download link to the source code are provided in the post.
Compact News Previewer
Compact News Previewer, as the name suggests, lets you show your latest article or news in a compact way. The news previewer shows a list of articles on the left side and the preview of the article along with a longer description on the right. Once the article or news item on the left is clicked, the preview slides in.
Content Slider with jQuery UI
This is a tutorial that shows you how to build a slick and functional content slider using the jQuery UI slider widget. You’ll have a container which will contain different blocks of content, and the slider on the bottom will be moved to show the different content blocks. All of the code and a download link to the source code are provided in the post.
Awkward Showcase goes beyond a standard content slider by letting you add tooltips, enable thumbnails, activate dynamic height, use different view modes, and a lot more.
TN3 Gallery is a really stylish slideshow-style slider with smooth transitions, multiple album options, customization, and other features. Did I mention it looks good?
Dynamic Carousel is a dynamic content slider and carousel, as the name implies. The way it’s dynamic is it uses percentages instead of pixel values, so it can be easily used on a responsive/flexible layout.
Agile Carousel is a really stylish content slider and carousel that’s very customizable, so you can use it according to your website requirements. The JSON data format is used, so you can more easily integrate with external data or data from your content management system (CMS). You get three different visual flavors to work with too, so you’re not stuck with just one carousel style.
Coda Slider Effect
This is a tutorial on how to create the slick and effective slider effect in the app Coda by Panic using jQuery. In addition to breaking down the pieces required to create the slider effect, the tutorial shows how to better it. All of the code is provided in the post.
Slick and Accessible Slideshow
A tutorial on how to create a stylish, simple, usable, and web accessible slideshow widget for your site using HTML, CSS, and jQuery. In the process, you’ll see the concept of Progressive Enhancement in action.
What Are Your Most Useful Sliders and Carousels?
Your turn: what are your favorite jQuery content (non-image) sliders and carousels? What glaring omissions do you know that should be on this list? Feel free to share your useful additions in the comments section below.