25+ Awesome Slider Techniques NEED TO HAVE for any Web Developer

June 18, 2013 · 23 comments

by Lars

slider-scripts

Animated sliding effects can if not used wrong or to much add excellent dynamics and uniqueness to websites. They are often seen as components that give access to multiple featured articles in an elegant and very space optimized way. Generally sliding effects are created using CSS and JavaScript and typically JavaScript frameworks like jQuery and mootools are used to make the code more robust and compatible. In particular jQuery sliders have become really popular and the availability of great solutions is amazing – check this collection for more information. If you use WordPress you are lucky as with plugins you can add sliders and galleries in no time. In this article tripwire magazine present more than 25 techniques for sliding and scrolling content, a must have collection for Web Developers!


ElegantThemes
ThemeForest

Advertisement

ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.

slider-scripts

Scrollable

The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need.

slider-scripts

How easy to create a slide tabbed box using jQuery

Simple and easy to so animated top navigated tab-based Content slider

slider-scripts

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

slider-scripts

jQuery.ScrollTo

Excellent ScrollTo plugin that lets you scroll with many configuration options to customize the animation and the position specified. Try it out to see how serious this is!

slider-scripts

Moving Boxes

This slider have buttons to change panels and the panels zoom in and out when user click on the buttons at the left and right.

slider-scripts

Creating a Slick Auto-Playing Featured Content Slider

Content slider with image thumb navigation below content. Generally good for featuring articles on a frontpage.

slider-scripts

Sliding Login Panel built with jQuery

In this tutorial, we will see how to create a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker way.

slider-scripts

Slider Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch. Try Demo | View Code

slider-scripts

Start/Stop Slider

This is a heavily animated slider where text and images fly in from different sides.

slider-scripts

Sliding Boxes and Captions with jQuery

Great tutorial explaining the fundamental technique of content sliders and how to create port folio style boxes with slider animations.

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

slider-scripts

Coda Slider

Really nice content slider with tab and arrow navigation.

slider-scripts

MetaLabDesign

Uses another interesting approach to scroll smoothly in a visually-appealing manner. The advantage of using scrollable compared to “normal” browser scrolling is that you don’t see the browser’s default scrollbars, and you can perform scrolling in much more visually sophisticated ways.

slider-scripts

jQuery Multimedia Portfolio

Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player. Demonstration

slider-scripts

jQuery Infinite Carousel

This tutorial will walk through the fundamentals of recreating the effect carousel used on the Apple Mac ads page

slider-scripts

Scrollable timeline

Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. So this episode of J4D demonstrates the same effect used in two completely different ways.

slider-scripts

ImageFlow

Inspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more. When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

slider-scripts

Creating a Nice Slider With jQuery UI

Sliders have many things going for them as a UI element; they offer the benefit restricting the choice a user has, without taking up the space of a drop down. If you need to ask the user to select a number between a range, you can either do an input box with validation, a drop down select element listing each possibility, or you can do a slider.

slider-scripts

The sliding Date-Picker

Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.

slider-scripts

Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well… all around easy. Creating an image gallery shouldn’t be a complex thing. I’ve created a new plugin that I’m packaging with PikaChoose called SliderJS.

slider-scripts

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Really nice content slider with at least 3 modes.

slider-scripts

An Accessible Slider

Slider control that allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.

Phatfusion Slider

Good looking and easy to use bar and slider.

  • Horizontal or Vertical options
  • snap to steps
  • apply transitions to the slide

jsProgressBarHandler

Dynamic Unobtrusive Javascript Progress/Percentage Bar. jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

dhtmlxSlider

A DHTML JavaScript component that allows you to implement vertical or horizontal slider into web pages. This component is highly customizable and really easy to implement. dhtmlxSlider is delivered with a number of predefined skins, but any other custom appearance can be created without any effort. Simple but effective, this JavaScript component is a neat way of creating nice-looking slider bars.

jQuery UI Slider from a Select Element

selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.

{ 8 comments… read them below or add one }

cheap custom jerseys May 19, 2011 at 10:44 am

Awesome Slider Techniques NEED TO HAVE for any Web Developer

Reply

3Dom May 9, 2011 at 6:43 am

Hi
If you need another slider (pretty classic, simple one, almost same feel as JW Player), you can visit http://www.bringmebusiness.com.au/reeltime-jquery-slideshow-plugin.php

Great picks by the way :)

Reply

Mobile Themes World April 28, 2011 at 10:34 am

thanks for sharing these awesome sliders

Reply

LxC BLOG November 24, 2010 at 8:20 am

Hello,

I have created and shared a JQuery Horizontal Slider.
Check it out http://lxcblog.com/2010/10/14/jquery-horizontal-slider-sliding-doors-tabs/
Let me know if you like it.

Thanks.

Reply

PROGRESSIVERED August 29, 2009 at 8:22 pm

Cool … I’m working on the new flash 3D slider (CU3ER) which I think you may find useful too once it is finished! Check out http://www.progressivered.com/cu3er/teaser.htm

Reply

Keith Davis August 16, 2009 at 8:30 pm

What a collection… I didn’t get past the first one, the Image Switch.
It was just what I was looking for. I wanted a plugin that would rotate images in a website header, but this plugin profuces lots of other clever effects.

I’d better start working my way through the other plugins… here goes!

Reply

Rahul Jadhav August 16, 2009 at 3:29 pm

Awesome post. Loved it. Will definitely use one of them. Thanks

Reply

Cheap Sites August 14, 2009 at 1:25 pm

Wow this is a great collection! Good job, I bookmarked the post. Are you planning on doing tuts for some of these?

Thanks,

Daniel

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 15 trackbacks }

Previous post:

Next post:


Web Analytics