JSFiddle - React, Tailwind, and code Playground

by avgustre

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<div class="pages">
    <div class="item">
        <div class="text">
            sdsdsdsdsd 1
        </div>
        <div class="double">
            before/after
        </div>
    </div>
    <div class="item">
        <div class="text">
            sdsdsdsdsd 2
        </div>
        <div class="double">
            before/after
        </div>
    </div>
    <div class="item">
        <div class="text">
            sdsdsdsdsd 3
        </div>
        <div class="double">
            before/after
        </div>
    </div>
</div>

CSS

html,body,.pages{
    width: 100%;
}
.item{
    width: 100%;
    border: 1px solid black;
}
.text{
    background: tomato;
    color: white;
    padding: 50px;
    text-align: center;
}
.double{
    background: lightblue;
    text-align: center;
    padding: 50px;
}

JavaScript

$('.pages').owlCarousel({
    stopOnHover: true,
    navigation: false,
    paginationSpeed: 1000,
    goToFirstSpeed: 2000,
    singleItem: true,
    mouseDrag: true,
    touchDrag: true
});

$(".double").on("touchstart mousedown", function(e) {
    // Prevent carousel swipe
    e.stopPropagation();
})