how to create Owl carousel?

Here is a demo to create carousel, using owl carousel

1. Download owl.corousel file using this link
2. Extract files and now in your project, refer Owl carousel files from "dist" folder, you should use
   

   <!--Main CSS files-->
   <link href="~/dist/assets/owl.carousel.css" rel="stylesheet" />
   <link href="~/dist/assets/owl.theme.default.min.css" rel="stylesheet" />
   
   <!--Main JS file-->
    <script src="~/dist/owl.carousel.js"></script>?

3. Now create a HTML/Js/css files with these code.

HTML

<div class="owl-carousel owl-theme">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>

CSS

.owl-carousel .item{

    background: #4dc7a0 none repeat scroll 0 0;
    height: 10rem;
    padding: 1rem;
}

jQuery for owl carousel

$(document).ready(function () {
        $('.owl-carousel').owlCarousel({
            loop: true, // to allow looping
            margin: 10, // for distance between two images/content
            responsiveClass: true,//for responsive layout set it to true
            responsive: {
                // breakpoint from 0px width and up
                0: {
                    items: 1,
                    nav: true
                },
                // breakpoint from 600px with and up, to show 3 items
                600: {
                    items: 3,
                    nav: false
                },
                // breakpoint from 1000px with and up, to show 5 items
                1000: {
                    items: 5,
                    nav: true,
                    loop: false
                }
            }
        })
    })

Tha's it, you are done, output will be

Hope this helps, please upvote, if it is helpful, or mark it as answer if possible, for reference check this link.