Owl Carousel 2 Responsive

by Nibin George

HTML

<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.theme.default.css">
<div class="owl-carousel">
    <div>
        <p>Slide 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>
        <div class="customNavigation"> <a class="prev">Previous</a>
 <a class="next">Next</a>

        </div>
    </div>
    <div>
        <p>Slide 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>
        <div class="customNavigation"> <a class="prev">Previous</a>
 <a class="next">Next</a>

        </div>
    </div>
    <div>
        <p>Slide 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quisquam rem assumenda, ullam, beatae earum animi magnam! Reiciendis, laboriosam, itaque.</p>
        <div class="customNavigation"> <a class="prev">Previous</a>
 <a class="next">Next</a>

        </div>
    </div>

CSS

.owl-carousel p {
    height:100px;
    width:500px;
}
.owl-item {
    padding:30px;
}

JavaScript

$('.owl-carousel').owlCarousel({
    loop: true,
    items: 1,
});
owl = $('.owl-carousel').owlCarousel();
$(".prev").click(function () {
    owl.trigger('prev.owl.carousel');
});

$(".next").click(function () {
    owl.trigger('next.owl.carousel');
});