JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">TAB 1</a></li>
        <li><a href="#tabs-2">TAB 2</a></li>
        <li><a href="#tabs-3">TAB 3</a></li>
    </ul>
    <div id="tabs-1">
        <div class="carousel" id="carousel-1">
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div>
    <div id="tabs-2">
        <div class="carousel">
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div>
    <div id="tabs-3">
        <div class="carousel">
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div>
              <h2>Slide</h2>
              <img src="http://placehold.it/200x200/" />
              <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div>
            ...

JavaScript

var _sliders = 3;
var _slider = 0;

$('.carousel').on('init', function(event, slick){
  _slider++;
	if (_slider == _sliders) {
  	$('#tabs').tabs();
  }
});

$('.carousel').slick();