How to make images slide using owl carousel

Hi,
In this below code snippet, we will see how to use owl carousel.

First, go to https://owlcarousel2.github.io/OwlCarousel2 and click download.
After Downloading the file, extract it.
open the extracted folder, -> docs ->demos ->basic.html
rightclick the basic.html and edit it notepad++, copy the below three files into your local path or local project folder

<link rel="stylesheet" type="text/css" href="../css/owl.carousel.min.css">

<link rel="stylesheet" type="text/css" href="../css/owl.theme.default.min.css">

<script type="text/javascript" src="../js/owl.carousel.js"></script>

select images which you want make slide as below

<div class="container">
              <div class="owl-carousel owl-theme">
                <div class="item">
                  <div class="imagsection">
                    <img src="D:/Manideep/practice/Images/a.png" class="carouselimage"/>
                  </div>

                </div>
                <div class="item">
                  <div class="imagsection">
                    <img src="D:/Manideep/practice/Images/sql.jpg" class="carouselimage"/>
                  </div>
                </div>
                <div class="item">
                  <div class="imagsection">
                    <img src="D:/Manideep/practice/Images/ps.jpg" class="carouselimage"/>
                  </div>
                </div>
                <div class="item">
                  <div class="imagsection">
                    <img src="D:/Manideep/practice/Images/e.jpg" class="carouselimage"/>
                  </div>
                </div>
                <div class="item">
                  <div class="imagsection">
                    <img src="D:/Manideep/practice/Images/ps.jpg" class="carouselimage"/>
                  </div>
                </div>
                <div class="item">
                  <div class="imagsection">
                    <img src="D:/Manideep/practice/Images/e.jpg" class="carouselimage"/>
                  </div>
                </div>
              </div>
            </div>

and add script file which is in below.

<script>
$(document).ready(function(){{
var owl = $('.owl-carousel');
                  owl.owlCarousel({
                    margin: 10,
                    nav: true,
                    loop: true,
                    responsive: {
                      0: {
                        items: 1
                      },
                      600: {
                        items: 3
                      },
                      1000: {
                        items: 5
                      }
                    }
                  });
                });
</script>

Here the owl carousel works!!!