Demo Carousal in php

Demo Carousal in php:

<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>

<!-- Additional -->

<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>

<!-- Additional  Ends -->