JSFiddle - React, Tailwind, and code Playground

by Sambora

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<h2>Latest updates</h2>

<div id="owl-example" class="owl-carousel">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
    <div class="item">item 7</div>
    <div class="item">item 8</div>
    <div class="item">item 9</div>
    <div class="item">item 10</div>
    <div class="item">item 11</div>
    <div class="item">item 12</div>
    <div class="item">item 13</div>
    <div class="item">item 14</div>
    <div class="item">item 15</div>
    <div class="item">item 16</div>
    <div class="item">item 17</div>
    <div class="item">item 18</div>
    <div class="item">item 19</div>
    <div class="item">item 20</div>
    <div class="item">item 21</div>
    <div class="item">item 22</div>
    <div class="item">item 23</div>
    <div class="item">item 24</div>
</div>

CSS

body {
    font-family: Arial;
}
.show_all .owl-stage {
    width:980px !important;
    -webkit-transform: translate3d(0, 0px, 0px) !important;
}
.owl-stage {
    transition: 0.7s !important;
    -webkit-transition: 0.7s !important;
}
.owl-item.cloned {display: none;}
.owl-carousel .item {
    margin: 3px 0;
    text-align:center;
    color:#fff;
    height: 20px;
    background: #4DC7A0;
    padding: 1rem;
}
.owl-controls {
    position: absolute;
    right: 0;
    top: -60px;
}

JavaScript

$('.owl-carousel').owlCarousel({
    loop: true,
    nav: true,
    dots: false,
    items: 6,
    margin: 6,
    autoplay: true,
});
$(".owl-nav").prepend('<div class="owl-show-all" style="">Show All</div>');

$(".owl-show-all").click(function () {
    $("#owl-example").toggleClass("show_all");
});