JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://renta.avkdev.ru/assets/scr/jquery.flexslider-min.js"></script>
<link rel="stylesheet" href="http://renta.avkdev.ru/assets/css/flexslider.css">
<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <li>
      <img src="http://placehold.it/565x300" />
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

JavaScript

$(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
   
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});