JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h4>THE TEAM</h4>
    </div>

    <div class="col-md-12">
      <div class="team-slider team-uk" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'>

        <!-- Team Member Slide -->
        <div class="team-player col-xs-12 col-md-4">
          <img class="center-block" src="//placehold.it/100x150" />
          <p class="lead">Andy</p>
          <p>CTO</p>
          <div class="team-icon-group">
            <a href="" class="team-social-btn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
            <a href="" class="team-social-btn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </div>
        </div>
        <!-- Team Member Slide end -->

        <!-- Team Member Slide -->
        <div class="team-player col-xs-12 col-md-4">
          <img class="center-block" src="//placehold.it/100x150" />
          <p class="lead">Bob</p>
          <p>CTO</p>
          <div class="team-icon-group">
            <a href="" class="team-social-btn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
            <a href="" class="team-social-btn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </div>
        </div>
        <!-- Team Member Slide end -->

        <!-- Team Member Slide -->
        <div class="team-player col-xs-12 col-md-4">
          <img class="center-block" src="//placehold.it/100x150" />
          <p class="lead">Joe</p>
          <p>CTO</p>
          <div...

JavaScript

jQuery(document).ready(function($) {
  function initSlider(target) {
    $(target).slick({
      dots: false,
      infinite: true,
      speed: 300,
      autoplay: true,
      slidesToShow: 1,
      adaptiveHeight: true
    });
  }

  initSlider('.team-uk');

  $('.team-flag').click(function(e) {
    $('.team-flag').removeClass('active');
    $('.team-slider').addClass('hidden');
    $(this).addClass('active');
    var target = $(this).data('target');
    $(target).removeClass('hidden');
    
    if ($(target).hasClass('slick-initialized'))
      $(target).slick('setPosition');
     else
      initSlider(target);
  });

});