Why should we we use Javascript in our application?, HTML and CSS is enough to make websites. In this article i like to familiarize 3 jquery slider plugins. Why should i use Javascript, In my view Javascript is a beautiful client side language to manipulate DOM in different ways, which is merely impossible using our CSS. Lets assume i have 20 images in my website, I can either show this all 20 as thumbnails, but how can i show its in big resolution or i can show all images in its maximum resolution but this will increase page length. We can use jQuery sliders to solve this problem, We will have navigation buttons or thumbnails to see different images without consuming too much space.
I have used many slider/carousel plugins, 3 of them are best for me, they are free and easy to use.
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.
Slick Carousel – most used jquery slider plugin
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
|
1 2 3 4 5 |
//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
|
1 2 3 4 5 6 7 8 9 10 11 |
<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
|
1 |
<script type="text/javascript"> $(window).load(function(){ $('#my-image-slider').slick({ // options }) }) </script> |
Responsiveness in slick
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$('#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.
Owl Carousel
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$('#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
|
1 2 3 4 5 |
$(document).ready(function(){ $('#my-image-slider').bxSlider({ // options }); }); |
Website : bxSlider