CODEWITHSUNDEEP
jquerycssinstallationowl-carousel
ClaytonAlanKinder
ClaytonAlanKinder

Reputation: 335

How do you install Owl Carousel?

I'm making a practice site and I've never made an image carousel before so I decided to try my luck at one. After some googling, I found Owl Carousel, which seems to be a pretty useful tool for making a carousel. However, I can't understand the instructions at all when it comes to installing it.

Here's what I have done so far:

  1. I downloaded Owl Carousel and moved the 'assets' and 'owl-carousel' folders into my root directory.

  2. I included all of this into my head tag:

    <meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="flexbox.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="assets/owl-carousel/owl.carousel.js"></script>

  3. I setup my HTML like so:

    <div id="owl-example" class="owl-carousel">
    <div class="img1"> Your Content </div>
    <div class="img2"> Your Content </div>
    <div class="img3"> Your Content </div>
</div>

  4. I added this to my CSS:

    #owl-demo .item img{
display: block;
width: 100%;
height: auto;
}

  5. Lastly, I activated this script.

        <script>
    $(document).ready(function() {

    $("#owl-demo").owlCarousel({

        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

        // "singleItem:true" is a shortcut for:
        // items : 1, 
        // itemsDesktop : false,
        // itemsDesktopSmall : false,
        // itemsTablet: false,
        // itemsMobile : false
    });
    </script>

I am trying to achieve this result:

http://owlgraphic.com/owlcarousel/demos/one.html

Here is all of my code on Jfiddle.

http://jsfiddle.net/pd19q8vc/

This isn't at all how my website looks, but I just wanted the full amount of code to be available in case it is needed.

So what am I doing wrong? How can I get this carousel a'working?

Upvotes: 1

Views: 25098

Answers (2)

Tahridabbas
Tahridabbas

Reputation: 25

please replace owl-example with owl-demo in div section where is owl-example and check. I hope it work.

Also you forgot to close the ready function at the end. add this }) at the end.

Upvotes: 0

anujsoft
anujsoft

Reputation: 81

    <script>
    $(document).ready(function() {

    $("#owl-demo").owlCarousel({

        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true

        // "singleItem:true" is a shortcut for:
        // items : 1, 
        // itemsDesktop : false,
        // itemsDesktopSmall : false,
        // itemsTablet: false,
        // itemsMobile : false
    });
});
</script>

pleas add }); before script tag closed

Upvotes: 3

Related Questions