how to create Owl carousel?


Hi,

 

Please, tell me, how to create an owl carousel?

plz 


Asked by:- saikrishtech
3
: 209 At:- 7/15/2017 9:36:04 AM
Carousel Jquery html css

Can you give us link of carousel which you are pointing, are you pointing https://owlcarousel2.github.io/OwlCarousel2/ ? 0
By : manish - at :- 7/15/2017 9:48:19 AM
@saikrishtech, did @jaya's answer worked for you? 0
By : vikas_jk - at :- 8/17/2017 10:58:12 AM





1 Answers
profileImage Answered by:- jaya

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

Owl-carousel-example-image

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

1
At:- 7/15/2017 11:25:00 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use