Simple Carousel demo - Stack Of Codes

Breaking

Thursday, 18 January 2018

Simple Carousel demo

SAMPLE OWL CARAOUSEL::


<link href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" crossorigin="anonymous">

<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js" crossorigin="anonymous"></script>


HTML CODES::

<div id="owl-demo">
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
    <div class="item">
        <img src="http://placehold.it/50x50" alt="Owl Image" />
    </div>
</div>

<script>
$(document).ready(function () {
    $("#owl-demo").owlCarousel({

        autoPlay: 3000, //Set AutoPlay to 3 seconds
        dots: true,
        items: 2,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [979, 3]
    });
});
</script>


<style>
#owl-demo .item {
    margin: 3px;
}
#owl-demo .item img {
    display: block;
    width: 100%;
    height: auto;
}
.owl-theme .owl-controls .owl-page {
    display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
    background: none repeat scroll 0 0 #869791;
    border-radius: 20px;
    display: block;
    height: 12px;
    margin: 5px 7px;
    opacity: 0.5;
    width: 12px;
}

</style>



No comments:

Post a Comment

Topics

PHP (27) CodeIgniter (22) SQL (4) Facebook (3) HTML (3) Blogger (2) Constructor (2) Destructor (2) Google (2) Aadhaar (1) Agent (1) Browser (1) CSS (1) Cakephp (1) Constants (1) How to (1) India (1) Ip address (1) JS (1) Jquery (1) Meta Tags (1) Robots (1) Scraping Data (1) escape_str (1) htaccess (1) iS mobile (1) javascript (1) mysqli (1)