Best jQuery Slider Plugins & Tutorials with Demo

bgStretcher jQuery Background Resizer & Slideshow

bgStretcher jQuery Background Resizer & Slideshow

bgStretcher (Background Stretcher) is a jQuery plugin for stretching one or more images proportionally across an entire page or element. When multiple images are supplied, bgStretcher displays them in a configurable slideshow with advanced options. The plugin allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area.

Features:

  • Proportionally Resizes Background Images
  • Lightweight jQuery Plugin
  • Unobtrusive Script & Simple to Setup
  • Works with Any Screen Resolution
  • Compatible with All Modern Browsers
  • Easy to Integrate with Popular CMS’s
  • Support Single or Multiple Images
  • Advanced Slideshow Features
  • Control Speed and Duration
  • Multiple Transition Effects
  • Resize Animation Available
  • Over 20 Configuration Options

Scrollbox : jQuery Plugin to Scroll a List

Scrollbox : jQuery Plugin to Scroll a List

A simple, lightweight jQuery plugin to scroll a list like carousel or traditional marquee.

Strapslide : jQuery Responsive Bootstrap Slider Plugin

Strapslide : jQuery Responsive Bootstrap Slider Plugin

Strapslide is the ultimate premium Bootstrap Slider Plugin offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. Even more important, it is fully responsive and mobile optimized and can take on any dimensions.

Features:

  • jQuery 1.7 – jQuery 2.x Supported
  • Based on Bootstrap
  • CSS3 Transition library
  • Touch Enabled
  • Responsive
  • Pause on Hover
  • Dynamic Pagination
  • Keyboard Navigation
  • HTML5 Support to play self hosted videos
  • Animation of each Caption element
  • Powerful CSS Transitions with jQuery FallBack
  • Adapts to Bootstrap spans
  • Set Fullscreen YouTube and Vimeo Videos

jQuery FullScreen Background / Gallery – Image and Video

jQuery FullScreen Background / Gallery - Image and Video

This jQuery plugin can be used as Full Screen Multimedia Background, Full Screen Multimedia Gallery and Full Width Multimedia Slider with both Image and Video.

Features:

  • Over 40 js options from where you can customize the plugin.
  • The plugin is fully responsive, including images and texts and will adapt the browser/device resolution.
  • It is compatible with IOS and Android operating systems.
  • Animated text from any direction: top, bottom, left and right, CSS and HTML formated.
  • Parameters for color, dimensions & transparency.

Jssor Slider : jQuery TOUCH & RESPONSIVE Plugin

Jssor Slider : jQuery TOUCH & RESPONSIVE Plugin

Jssor slider is announced as one of the best performance sliders. No-Jquery minimum 15KB javascript code by smart compression. It is one of the lowest CPU comsuming slider. slider (1%), slider with caption (4%), slider with slideshow (~4%)

Features:

  • Optional thumbnails, tabs or bullets navigation
  • Position of thumbnails, tabs and bullets are adjustable, can be vertical or horizontal
  • Touch drag navigation for thumbnail navigator is allowed
  • Use any html/css code to customize thumbnail to anyformat
  • Multiple sliders in one page
  • Any html code can be placed inside slide
  • Free support and upgrades
  • Add unlimited amount of captions
  • Set caption animation to chain mode
  • Set caption animation to flatten mode
  • Rollback caption animation when touch end/mouse up
  • Move, fade, clip, zoom and rotation transitions are all supported for all browsers
  • Composite move, fade, clip, zoom and rotation in one transition is allowed
  • Javascript code deep compression by smart compression engine
  • Arrow key navitation, navigate slider by click keyboard arrow left/right
  • HTML caption with animation (390+ caption transitions)

HashSlider : jQuery Content Slider

HashSlider : jQuery Content Slider

Hashslider is a jquery-based slider does what the most jquery-sliders do, but adds a hashtag to the window location, so you can link to any content / position of the slider.

jSliderPro : jQuery CSS3 Responsive Slider

jSliderPro : jQuery CSS3 Responsive Slider
  • – Transition engine that can generate an incredible number of stunning effects. More possibilities incoming with the very next releases.
  • – No images limits and automatic memory management.
  • – Javascript callbacks to interface with other programs.
  • – CSS3 and HTML5 only.
  • – Fully responsive and cross browser compatibility from desktop PCs to mobile devices.
  • – Reference manual and hundreds of examples included.

Create a Vertical, Horizontal and Diagonal Sliding Content with jQuery

Create a Vertical, Horizontal and Diagonal Sliding Content with jQuery

In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! Don’t worry, we won’t rely on javascript too much, we will use css/html for the layout and javascript only do the scrolling. And hey, it will still work even if your browser doesn’t support javascript.

Interactive Particles Slideshow with Html5 & JavaScript

Interactive Particles Slideshow with Html5 & JavaScript

This is an experimental interactive slideshow component with math shapes and texts using Html5 Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.

Dasky : jQuery Timeline Slider

Dasky : jQuery Timeline Slider

Dasky is a jQuery timeline slider,you can use it to show you products’s chagelog/loadmark, or loadmark of you team/life. And others what you want. It based on the power of css transforms and will fallback in old browsers who do not support it.

Features:

  • Fluid layout
  • Fullscreen or not
  • Auto play
  • Mousewheel control
  • Keybords control
  • Major browsers compatible and fallback to old browsers