3 Most useful Jquery Slider/Carousel plugins

Published On - December 30, 2015

sibin

1) Slick Slider Most popular and free  jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions. [caption id="attachment_74" align="aligncenter" width="640"]Slick Slider Slick Carousel – most used jquery slider plugin[/caption] There are many new features to make slick as first choice for developers, slick support both vertical and horizontal sliders, it is very useful for some image gallery websites. If you want a slider which add new images in some particular period, using  ajax or any other api calls, slick can handle it. I have work with a fashion website where new images are added from some live source. Slick have function to add new images, so it is a better option if you need some live updates. Slick has another feature called ‘filter‘, we can filter out images based on some criteria, for example one of our client has a fashion website, after live show, they filter out there images to winners, runner up, best shots etc… so in each categories there will be many images, for example there will be more that one winner or there will more photos for winners, slick can filter our and show only images from this category, we can click other tabs/buttons to show other categories or we can show all images. Responsiveness is very important for websites, Responsiveness it should be adapt all devises and work with mobile and tablets. Slick solve these issues because slick support responsiveness, it has some build in option for responsive layout, we an choose breakpoints, and how many slides should visible in each breakpoints/ resolution

How to use Slick in our website

Download slick minified version from slick.com Include  plugin 
//CSS
<link rel="stylesheet" href="css/slick.min.css"/>
<link rel="stylesheet" href="css/slick-theme.min.css"/>
// Javascript
<script type="text/javascript" src = "js/slick-min.js"></script>
Create a list of images 
<div class="image-wrapper" id="my-image-slider">
<div class="each-image">
<img src="image/image-one.html alt="Image One"/>
</div>
<div class="each-image">
<img src="image/image-one.html alt="Image One"/>
</div>
<div class="each-image">
<img src="image/image-one.html alt="Image One"/>
</div>
</div>
Initialize slick 
<script type="text/javascript"> $(window).load(function(){ $('#my-image-slider').slick({ // options }) }) </script>
 

Responsiveness in slick

$('#my-image-slide').slick({
  responsive: [
    { //
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      /**
      *  2 slides below 600 pixel
      *
      **/
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    { /**
      * below 480 pixel it shows only 1 image, and when we click left or right
      * arrows it will slide only one
      **/
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
  2) Owl Carousel Owl carousel have 2 versions, v1 and v2,  v2 is in beta state but we can download it, they may add new features in final version or they may remove any features in final version. Try to update code when they release  final version . Owl Carousel second in my list, it has some unique features those are not in Slick carousel, We can easily create progress bars in owl carousel using their callback functions. We can show a bar loading from 0 to 100%, after than new image will display. This can achieve easily. Another feature is it support animation.css,  we can use all animations, instead of slide and fade. [caption id="attachment_75" align="aligncenter" width="640"]Owl Carousel Owl Carousel[/caption] Like slick, owl carousel also support responsiveness, we can use break points to specify different screen resolutions.Owl carousel has some unique features, one is url hash navigation, URLhashListener option is listening for url hash change and is looking for slide with the same data name. Some time it is very useful. owl carousel website. 
$('#my-image-slider').owlCarousel({
 responsive : {
    // breakpoint from 0 up
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 480 up
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 768 up
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
  }
})
3) bxSlider bxSlider is another slider we use offenly. It is a simple slider with less features compare to slick and owl carousel. We can create synscronize sliders with bxSlider functions and events. Same logic can also use in Owl carousel. bxSlider also support vertical slider but it has some issues when number of images is below some specific point under some condition. So ensure number of slides before we use bxSlider. For Examle, consider If we have only 2-3 images in some pages and more than 10 images in another pages. And we make a vertical container that can hold more than 5 images, We have 2-3 images on some pages and more images in another pages, so first case we will have free spaces and if we enabled looping it will show some unexpected behaviour, but if we have more images that our visible part, it won’t create any problem. Features
  • Vertical and Horizontal thumbnails
  • Pager and navigation icons
  • Responsive
  • Adaptive height and Adpative height speed
  • Callback events and methods
  • Ticker
  • Captions can include along with images
  • CSS transitions
  • Many inbuilt transition effect for sliders
$(document).ready(function(){
  $('#my-image-slider').bxSlider({
   // options
  });
});
  Website : bxSlider  ]]>