jquery slider plugins

best for carousels  http://coolcarousels.frebsite.nl/c/68/

best http://www.freshdesignweb.com/jquery-image-slider-slideshow.html

 

HTML

<div id="wrapper">
 <div id="slider">
 
  <div class="slide" style="background-image: url(img/iceage.jpg);">
   <div class="slide-block">
    <h4>Ice Age</h4>
    <p>Heading south to avoid a bad case of global frostbite, a group of migrating misfit creatures embark on a hilarious quest to reunite a human baby with his tribe.</p>
   </div>
  </div>
 
  <div class="slide" style="background-image: url(img/birds.jpg);">
   <div class="slide-block">
    <h4>For The Birds</h4>
    <p>For the Birds is an animated short film, produced by Pixar Animation Studios released in 2000. It is shown in a theatrical release of the 2001 Pixar feature film Monsters, Inc.</p>
   </div>
  </div>
 
  <div class="slide" style="background-image: url(img/up.jpg);">
   <div class="slide-block">
    <h4>UP</h4>
    <p>A comedy adventure in which 78-year-old Carl Fredricksen fulfills his dream of a great adventure when he ties thousands of balloons to his house and flies away to the wilds of South America.</p>
   </div>
  </div>
 
 </div>
</div>

JavaScript

$(function() {
 $('#slider').carouFredSel({
  width: '100%',
  align: false,
  items: 3,
  items: {
   width: $('#wrapper').width() * 0.15,
   height: 500,
   visible: 1,
   minimum: 1
  },
  scroll: {
   items: 1,
   timeoutDuration : 5000,
   onBefore: function(data) {
 
    // find current and next slide
    var currentSlide = $('.slide.active', this),
     nextSlide = data.items.visible,
     _width = $('#wrapper').width();
 
    // resize currentslide to small version
    currentSlide.stop().animate({
     width: _width * 0.15
    });  
    currentSlide.removeClass( 'active' );
 
    // hide current block
    data.items.old.add( data.items.visible ).find( '.slide-block' ).stop().fadeOut();     
 
    // animate clicked slide to large size
    nextSlide.addClass( 'active' );
    nextSlide.stop().animate({
     width: _width * 0.7
    });      
   },
   onAfter: function(data) {
    // show active slide block
    data.items.visible.last().find( '.slide-block' ).stop().fadeIn();
   }
  },
  onCreate: function(data){
 
   // clone images for better sliding and insert them dynamacly in slider
   var newitems = $('.slide',this).clone( true ),
    _width = $('#wrapper').width();
 
   $(this).trigger( 'insertItem', [newitems, newitems.length, false] );
 
   // show images 
   $('.slide', this).fadeIn();
   $('.slide:first-child', this).addClass( 'active' );
   $('.slide', this).width( _width * 0.15 );
 
   // enlarge first slide
   $('.slide:first-child', this).animate({
    width: _width * 0.7
   });
 
   // show first title block and hide the rest
   $(this).find( '.slide-block' ).hide();
   $(this).find( '.slide.active .slide-block' ).stop().fadeIn();
  }
 });
 
 // Handle click events
 $('#slider').children().click(function() {
  $('#slider').trigger( 'slideTo', [this] );
 });
 
 // Enable code below if you want to support browser resizing
 $(window).resize(function(){
 
  var slider = $('#slider'),
   _width = $('#wrapper').width();
 
  // show images
  slider.find( '.slide' ).width( _width * 0.15 );
 
  // enlarge first slide
  slider.find( '.slide.active' ).width( _width * 0.7 );
 
  // update item width config
  slider.trigger( 'configuration', ['items.width', _width * 0.15] );
 });
 
});

CSS

html, body {
 height: 100%;
 padding: 0;
 margin: 0;
}
body {
 background: #f9f9f3;
}
body * {
 font-family: Arial, Geneva, SunSans-Regular, sans-serif;
 font-size: 14px;
 color: #222;
 line-height: 20px;
}
 
#wrapper {
 height: 100%;
 width: 100%;
 min-height: 650px;
 min-width: 900px;
 padding-top: 1px;
}
#slider {
 margin: 100px 0 0 0;
 height: 500px;
 overflow: hidden;
 background: url(img/ajax-loader.gif) center center no-repeat;
}
 
#slider .slide {
 position: relative;
 display: none;
 height: 500px;
 float: left;
 background-position: center right;
 cursor: pointer;
 border-left: 1px solid #fff;
}
 
#slider .slide:first-child {
 border: none;
}
 
#slider .slide.active {
 cursor: default;
}
 
#slider .slide-block {
 position: absolute;
 left: 40px;
 bottom: 75px;
 display: inline-block;
 width: 435px;
 background-color: #fff;
 background-color: rgba(255,255,255, 0.8); 
 padding: 20px;
 font-size: 14px;
 color: #134B94;
 border: 1px solid #fff;
 overflow: hidden;
 border-radius: 4px;
}
 
#slider .slide-block h4 {
 font-size: 36px;
 font-weight: bold;
 margin: 0 0 10px 0;
 line-height: 1;
}
#slider .slide-block p {
 margin: 0;


http://www.typicallyspanish.com/royalslider/templates/video-gallery/ 
 
http://www.cssauthor.com/best-jquery-slider-plugins/ 

COIN SLIDER – jQuery Image Slider with Unique Effects

COIN SLIDER – jQuery image slider plugin with more unique transitions effects. Coin Slider have lot of features that jqFancyTransitions.

Demo Page Download

 

 http://thedesignhill.com/jquery-image-and-content-sliders/

Apple-style Slideshow Gallery With CSS & jQuery

Demo | Source

Responsive Image Gallery with Thumbnail Carousel

Demo | Source

Full Width Image Slider

Demo | Source

Elastic Content Slider

Demo | Source

Fullscreen Slit Slider

Demo | Source

Swift Content Navigation

Demo | Source

Vertical Showcase Slider

Demo | Source

Triple Panel Image Slider

Demo | Source

Parallax Content Slider

Demo | Source

Elastic Image Slideshow

Demo | Source

Rotating Image Slider

Demo | Source

3D Wall Gallery

Demo | Source

Thumbnails Preview Gallery

Demo | Source

zAccordion

Demo | Source

Parallax Slider With jQuery

Demo | Source

Portfolio Zoom Slider

Demo | Source

Animated Portfolio Gallery

Demo | Source

Tiny Circle Slider

Demo | Source

Slider Gallery With jQuery

Demo | Source

Photostack Gallery with jQuery and CSS3

Demo | Source

Simple Content Slider

Demo | Source

AD Gallery – a jQuery gallery plugin

Demo | Source

Pikachoose

 

 

 

 

 http://designscrazed.net/best-free-jquery-plugins/

 

Flat jQuery Price Slider

This jQuery price slider to select range of prices which help you vastly in your development and design projects. This price range slider is totally free to download.
Examples|Download

FooTable Plugin

A free jquery plugin which can showcase your html tables in responsive. Get your old tables look good in mobiles, tablets etc for free.
Demo | Source

Justified Gallery

The best jquery plugin for 2014 as this is a must have plugin for all theme makers. The plugin makes your gallery adapt to any screen resolution by justifying the gallery layouts, resizing wherever necessary to display the whole gallery properly. You can find how plugin works by resziign the browser window.
Source

Clock-style timepicker

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).
Demo | Source

Slidebars

Slidebars was born from a reoccurring need to create off-canvas sliding mobile menus for responsive design. Slidebars is a jQuery plugin for quickly and easily implementing app-style revealing, overlaying, push menus and sidebars into your website.
Demo | Source

Gmaps jQuery Map Plugin

Gmaps js script is simple in itself with minimal code and clean documentation to implement the code all by yourself. The power of Google maps now can be harvested with this cool jQuery plugin without any limits. Choose from 25 Different features starting from basic map layout to Street View Panoramas.
Examples|Download

FormChimp - MailChimp ajax plugin for jQuery

A customizable MailChimp ajax plugin for jQuery, provides an easy and lightweight way to let your users sign up to your MailChimp list.
Examples|Download