Plugin-OwlCarousel-Demo

Init, add, remove, replace, next, ..etc

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com//assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com//assets/vendors/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com//assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel">
    <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>
<div class="actions">
    <button id="left-add" class="btn btn-default">left add</button>
    <button id="next" class="btn btn-default">next</button>
    <button id="replace" class="btn btn-default">replace</button>
    <button id="remove" class="btn btn-default">remove all</button>
    <button id="right-add" class="btn btn-default">right add</button>
</div>

CSS

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

JavaScript

var owl = $('.owl-carousel');
owl.owlCarousel({
    margin: 10,
    nav: true,
    items: 4
});

$('#next').on('click', function () {
    owl.trigger('next.owl.carousel', [500]);
});

$('#replace').on('click', function () {
    var html = '<div class="item"><h4>R1</h4></div>';
    var content = '<div class="owl-item">' + html + '</div>';
    owl.trigger('replace.owl.carousel', [$(content), 0])
        .trigger('refresh.owl.carousel');
});

$('#left-add').on('click', function () {
    var html = '<div class="item"><h4>N1</h4></div>';
    var content = '<div class="owl-item">' + html + '</div>';
    owl.trigger('add.owl.carousel', [$(content), 0])
        .trigger('refresh.owl.carousel').trigger('pre.owl.carousel');
});
$('#right-add').on('click', function () {
    var html = '<div class="item"><h4>N1</h4></div>';
    var content = '<div class="owl-item">' + html + '</div>';
    owl.trigger('add.owl.carousel', [$(content)])
        .trigger('refresh.owl.carousel').trigger('next.owl.carousel');
});

$('#remove').on('click', function () {
    owl.trigger('remove.owl.carousel', 2)
        .trigger('refresh.owl.carousel');
});