xSquare is a responsive jQuery image slider. It has a layout that consists of grids making it useful for variety of web page positions. Though the main purpose of the image slider is within a banner position it can easily be implemented as an image gallery or something similar because it is compatible with lightbox, prettyPhoto etc. The loading of images is done via smart lazyLoad with an implemented loader. Effective sliding transitions make the slider have a more dynamic look. The xSquare responsive image slider gives you the option to place up to 7 images in one slide or to place one effectively sliced photo.
Best jQuery Slider Plugins & Tutorials with Demo
tabSwitch : jQuery tab/slider plugin
tabSwitch is a tab/slider plugin for jQuery. You could make a tab box system with the least of code and still fully customizable. Currently, you could choose from 7 different effects with 2 view styles. You could also hot swap the effects around in runtime.
- There is no limit what kind of HTML tag you use.
- You could move to next, prev tab or jump to a specific tab.
- All the controls could be anywhere in the website, on top of a tab, inside a tab…
- Multi-level tab system.
- You could change the style of the viewport, you could add a class for every single tab…
Wope Slider : jQuery Responsive Layer Slider
Wope slider is a light, fast, clean, elegant, responsive and touchable slider. It allows you to create a powerful slider to showcase your products or service effectively and attractively with many gentle, eye-catching effects.
The slider works well on modern moblie devices such as tablets, smartphones because it is touchable and responsive with any size of website.
Features:
- Touch enabled.
- Responsive-ready.
- Multiple Sliders
- Autoplay features, pause and play buttons.
- Gui options
- Easy slider options
- 10 clean and elegant skins
- Many animation types and easings
- Fully documented & Free Support
- Compatible with all major browsers
CoolCarousels : Showcasing 50+ cool jQuery carousel examples
All carousels on this website are created for your inspiration, using only the jQuery-library and the jQuery.carouFredSel-plugin.They have been tested to work on FireFox and Chrome.
Vertical Showcase Slider with jQuery and CSS Transitions
In this tutorial we will create a very simplistic and responsive product slider for an online store or a portfolio. The idea is to have different sections in a fullscreen view: the image or preview, a navigation and the description. When navigating through the items, we will slide the preview section and the section with the description in opposite directions. The idea for this kind of “opposite” transition comes from the beautiful website of the National LGBT Museum which moves the left and right side in the same manner when navigating or scrolling the page.
Cycle2 : Versitile Slideshow plugin for jQuery
Cycle2 is a versitile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.
Highlights:
- Supports all browswers
- Declarative: no scripting needed!
- Responsive: fully control your slideshow via css (resize this page to see!)
- Customizable: per-slide option overrides
- Extensible: fully customizable API (on a per-slideshow basis if you wish)
- Smart: supports image loading and delayed initialization
- Smarter: supports progressive image loading
- Out-of-the-box functionality for pagers, captions, overlays, and prev/next controls
- Support for swipe gesture on mobile devices
- Fade, scroll, shuffle, tile and carousel transitions
- Bookmarkable slides
jQuery Cute Slider – 3D & 2D HTML5 Image Slider
Tired of boring flat sliders? Looking for a unique slider? Here’s what you want,with Cute Slider you will be able to show your slides with awesome 3D & 2D transitions.Cute Slider makes your ideas alive, It gives you desire,you can use it as an advanced 2D slider with tons of 2D transitions, or add third dimention to your slider and create a unique and inpressive 3D slider.
Features :
- 3D & 2D effects
- 100+ prest transitions
- 3 fallback levels(CSS3D, Canvas, 2D)
- Cross Browser
- Device friendly
- Youtuve and Vimeo videos
- Search engine optimized
Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery
Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible.
We’re going to write this code as a jQuery plugin, so first you need to include jQuery. Next we want to include a script called Modernizr. We only need 3D Transforms, and you can download the required script from here. This will ensure everything will work fine in browsers which do not support 3D Transforms. Then you have to make a file called jquery.pictureflip.js which will be where we’re putting our plugin code!
Fireworks.js : Javascript Animation Experiment
Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it’s a fireworks effect someone could theoretically use on their site. And come on, who doesn’t want something like that? As far as appropriateness is concerned, this effect could be compared to the dripping-blood-line, skull and fireball animated .GIF images so popular on the web in 1997. Exploding firework animations are hot, the new black, the script equivalent of the blink tag. Mmm, blink tag.
