JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/zurb/twentytwenty/master/js/jquery.twentytwenty.js"></script>
<script src="https://rawgithub.com/zurb/twentytwenty/master/js/jquery.event.move.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/zurb/twentytwenty/master/css/twentytwenty.css">
<div class="twentytwenty-wrapper twentytwenty-horizontal" data-imageID="1">
    <div class="image-compare-set twentytwenty-container">
        <img src="http://placehold.it/1024x760&text=1+BEFORE" />
        <img src="http://placehold.it/1024x768&text=1+AFTER" />
    </div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal"  data-imageID="2" style="display:none;">
    <div class="image-compare-set twentytwenty-container">
        <img src="http://placehold.it/1024x760&text=2+BEFORE" />
        <img src="http://placehold.it/1024x768&text=2+AFTER" />
    </div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal" data-imageID="3" style="display:none;">
    <div class="image-compare-set twentytwenty-container">
        <img src="http://placehold.it/1024x760&text=3+BEFORE" />
        <img src="http://placehold.it/1024x768&text=3+AFTER" />
    </div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal" data-imageID="4" style="display:none;">
    <div class="image-compare-set twentytwenty-container">
        <img src="http://placehold.it/1024x760&text=4+BEFORE" />
        <img src="http://placehold.it/1024x768&text=4+AFTER" />
    </div>
</div>

<div class="image-compare-nav owl-carousel owl-theme">
    <div class="owl-wrapper">
        <div class="owl-item">
            <a href="#" style="background-image:url(http://placehold.it/300&text=1)" class="item" data-imageID="1"></a>
        </div>
        <div class="owl-item">
            <a href="#" style="background-image:url(http://placehold.it/300&text=2)" class="item" data-imageID="2"></a>
        </div>
        <div class="owl-item">
            <a href="#"...

CSS

.twentytwenty-container {
    width:500px;
    margin:1em 0;
}
.owl-item {
    float:left;
    width:100px;
}
.image-compare-nav a {
    display:inline-block;
    width:60px;
    height:60px;
    border:4px solid #877874;
    background-size:cover;
    background-position:center;
}
.image-compare-nav a:hover {
    border-color:#61504d;
}

JavaScript

$(".twentytwenty-container").twentytwenty();

$(".image-compare-nav a.item").click(function() {
   // Hides all images.
   $(".twentytwenty-wrapper").hide();

   // Shows appropriate one.
   var imageID = $(this).data("imageID"); // Fetches the value of the data-imageId attribute.
   $(".twentytwenty-wrapper[data-imageID="+imageID+"]").show();
});