JSFiddle - React, Tailwind, and code Playground

by Prateek Varma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<div>
  <ul align="center" style="padding-top: 20px;" class="select-link">
    <li class="link-promotions" style="display: inline; font-size: 18px; margin-right: 80px;"><a href="#">PROMOTIONS</a></li>
    <li class="link-casino-games" style="display: inline; font-size: 18px; margin-right: 80px;"><a href="#">CASINO GAMES</a></li>
    <li class="link-live-odds" style="display: inline; font-size: 18px; margin-right: 80px;"><a href="#">LIVE ODDS</a></li>
  </ul>
</div>

<div class="owl-one owl-carousel owl-theme sec-promotions" style="margin: auto; width: 60%;">
  <div class="link" id="show-hide-1"><img id="pic-animate" src="http://lorempixel.com/200/300/"></div>
  <div class="link" id="show-hide-2"><img id="pic-animate" src="http://lorempixel.com/200/301/"></div>
  <div class="link" id="show-hide-3"><img id="pic-animate" src="http://lorempixel.com/200/302/"></div>
  <div class="link" id="show-hide-4"><img id="pic-animate" src="http://lorempixel.com/200/303/"></div>
</div>

<div class="sec-casino-games" style="display: none;">
  <div class="owl-two owl-carousel owl-theme active" style="margin: auto; width: 60%;">
    <div class="link" id="show-hide-1"><img id="pic-animate" src="http://lorempixel.com/200/304"></div>
    <div class="link" id="show-hide-2"><img id="pic-animate" src="http://lorempixel.com/200/305"></div>
    <div class="link" id="show-hide-3"><img id="pic-animate" src="http://lorempixel.com/200/306"></div>
    <div class="link" id="show-hide-4"><img id="pic-animate" src="http://lorempixel.com/200/307"></div>
    <div class="link"...

CSS

.active-link {
  font-weight: bold;
  border-bottom: solid #f1962f 4px;
}

html img {
  display: -webkit-inline-box;
}

.owl-theme .owl-nav [class*=owl-] {
  margin: 0;
}

.owl-prev {
  width: 35px;
  height: 100px;
  position: absolute;
  top: 40%;
  left: -45px;
  display: block!IMPORTANT;
  border: 0px solid black;
}

.owl-prev span {
  font-size: 200%
}

.owl-next span {
  font-size: 200%
}

.owl-next {
  width: 35px;
  height: 100px;
  position: absolute;
  top: 40%;
  right: -45px;
  display: block!IMPORTANT;
  border: 0px solid black;
}

.owl-prev i,
.owl-next i {
  transform: scale(1, 6);
  color: #ccc;
}

.display-it {
  display: block;
}

.owl-item link img {
  width: auto;
}

JavaScript

jQuery(document).ready(function($) {

  $('.owl-one').owlCarousel({
    items: 4,
    lazyLoad: true,
    margin: 20,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 2
      },
      480: {
        items: 3
      },
      786: {
        items: 4
      }
    }
  });

  $('.owl-two').owlCarousel({
    items: 4,
    lazyLoad: true,
    margin: 20,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 2
      },
      480: {
        items: 3
      },
      786: {
        items: 4
      }
    }
  });

  $('.owl-three').owlCarousel({
    items: 4,
    lazyLoad: true,
    margin: 20,
    nav: true,
    dots: false,
    responsive: {
      0: {
        items: 2
      },
      480: {
        items: 3
      },
      786: {
        items: 4
      }
    }
  });

    /*Change css of links on click*/
  $('.select-link li').click(function() {
    $('.select-link li').removeClass('active-link');
    $(this).addClass('active-link');
});

/*showing/hiding particular carousels on clicking links*/
  $('.link-promotions').click(function() {
    $('.sec-casino-games').hide();
    $('.sec-live-odds').hide();
    $(".sec-promotions").show(1000);
    $(".pic1, .pic2, .pic3, .pic4").hide('slow');
  });

  $('.link-casino-games').click(function() {
    $('.sec-promotions').hide();
    $('.sec-live-odds').hide();
    $(".sec-casino-games").show(1000);
    $(".pic1, .pic2, .pic3, .pic4").hide('slow');
  });

  $('.link-live-odds').click(function() {
    $('.sec-promotions').hide();
    $('.sec-casino-games').hide();
    $(".sec-live-odds").show(1000);
    $(".pic1, .pic2, .pic3, .pic4").hide('slow');
  });

});