Image Slider | Create Responsive Image slider


In this article we will learn about Image slider or image carousel. We will learn how to install jQuery plugin and use it for our website to display the slider.

Image slider or image carousel is an appropriate way to display multiple images, videos and graphic in website. For this purpose we have to install jQuery plugin called slick slider. It is an amazing and advanced plugin to display image slider with lot of features an functionalities.

First of all we'll create a file named "carousel.html" and install some important plugins.

Install jQuery

For the implementation of our plugin web have to install javascript library called jQuery. This is modern and enhanced version of javascript which helps to reduce the code and make our website functional in less time.

Installing jQuery is very simple, we just have to place a link in our html document. Just go here and copy the CDN(Content Delivery Network) link and paste it in the document just before the closing tag of body as follows.

<body>
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
</body>

That's it, we've successfully installed jQuery in our project.

Installing Image Slider

Now we will install our main magician plugin called Slick slider. Download the zip file from this link and extract this file and save to the "assets/libs". Now we'll import the necessary files in our document. There are three files to import from the extracted folder to create image slider as follows

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slick Carousel</title>
    <link rel="stylesheet" href="assets/libs/slick/slick/slick.css">
    <link rel="stylesheet" href="assets/libs/slick/slick/slick-theme.css">
</head>
<body>
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="assets/libs/slick/slick/slick.min.js"></script>
</body>

We have included two css and one js file in our document. Plugin installation is complete and we need to add code for slider. After this our entire document will looks like as follows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slick Carousel</title>
    <link rel="stylesheet" href="assets/libs/slick/slick/slick.css">
    <link rel="stylesheet" href="assets/libs/slick/slick/slick-theme.css">
    <style>
        .slick-prev:before, .slick-next:before{
            color: black !important;
        }
        .slick-slide img {
            display: block;
            margin: auto;
            width: 100%;
        }
        .carousel{
            width: 80% !important;
            margin: auto;
        }
    </style>
</head>
<body>

<div class="carousel">
    <div class="slick-slider slider">
        <div>
            <img src="https://www.waff.com/resizer/sEkKjn1-0uvmGWuzE23bugLJaEU=/1200x600/arc-anglerfish-arc2-prod-raycom.s3.amazonaws.com/public/IRHJO5U2ERGK5NMJYVKQ5PWBDU.jpg" alt="">
        </div>
        <div>
            <img src="https://i2.wp.com/www.thoughtsparsed.com/wp-content/uploads/2019/09/copy-of-copy-of-copy-of-copy-of-whats-wrong-with-being-colorblind-7.png?fit=1200%2C600&ssl=1" alt="">
        </div>
        <div>
            <img src="https://iimsb.in/wp-content/uploads/2020/02/gray-laptop-computer-showing-html-codes-in-shallow-focus-160107-1200x600.jpg" alt="">
        </div>
    </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="assets/libs/slick/slick/slick.min.js"></script>
  <script>
        $(document).ready(function () {
            $(".slick-slider").slick({
                infinite: true,
                speed: 500,
                autoplay: true,
                pauseOnHover: false
            });
        });
  </script>
</body>
</html>

We have add another script tag to initiate plugin for the target tag. We have targeted by class and add plugin basic settings. If you look at the html code each image element is closed by div which means the number of slides will be increased or decreased with respect to the number of div elements and we have just placed image in it.

You might be noted that we've write additional style code for our slider. Copy the code and paste it in your document and install plugins according to your folder structure. You will find this plugin very useful for your website.

Here is the demo in browser

image-slider


Tipu

about the author

Tipu is web developer from Pakistan. He is very talented in developing websites in wordpress and multiple frameworks in php.

other posts by Tipu
View all Posts By Tipu

No Comments Yet!

Leave a Comment  

Your email address will not be published. Required fields are marked *