JSFiddle - React, Tailwind, and code Playground

by Vince Oveson

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>

        </li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>

        </li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>

        </li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>

        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
            <div class="owl-carousel" id="owl1">
                <img src="https://via.placeholder.com/500x300/880000/FFFFFF?text=HOME+%231">
                <img src="https://via.placeholder.com/500x300/008800/FFFFFF?text=HOME+%232">
                <img src="https://via.placeholder.com/500x300/000088/FFFFFF?text=HOME+%233">
                <img src="https://via.placeholder.com/500x300/880000/FFFFFF?text=HOME+%234">
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="profile">
            <div class="owl-carousel" id="owl2">
                <img src="https://via.placeholder.com/500x300/880000/FFFFFF?text=PROFILE+%231">
                <img...

CSS

.owl-carousel img {
  width: 100%;
  max-width: 300px;
  padding: 5px;
}

JavaScript

$(document).ready(function () {
  initialize_owl($('#owl1'));
  
  let tabs = [
    { target: '#home', owl: '#owl1' },
    { target: '#profile', owl: '#owl2' },
    { target: '#messages', owl: '#owl3' },
    { target: '#settings', owl: '#owl4' },
  ];

  // Setup 'bs.tab' event listeners for each tab
  tabs.forEach((tab) => {
    $(`a[href="${ tab.target }"]`)
      .on('shown.bs.tab', () => initialize_owl($(tab.owl)))
      .on('hide.bs.tab', () => destroy_owl($(tab.owl)));
  });    
});

function initialize_owl(el) {
  el.owlCarousel({
    loop: true,
    margin: 10,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true
      },
      600: {
        items: 1,
        nav: false
      },
      1000: {
        items: 1,
        nav: true,
        loop: false
      }
    }
  });
}

function destroy_owl(el) {
  el.data('owlCarousel').destroy();
}