JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<link rel="stylesheet" href="https://jamesmuspratt.com/codepen/css/flexslider.css">
<div class="myslider">
  <ul class="slides">
    <li><img src="https://jamesmuspratt.com/codepen/img/unsplash1.jpg" alt="" ></li>
    <li><img src="https://jamesmuspratt.com/codepen/img/unsplash2.jpg" alt="" ></li>
    <li><img src="https://jamesmuspratt.com/codepen/img/unsplash3.jpg" alt="" ></li>
    <li><img src="https://jamesmuspratt.com/codepen/img/unsplash4.jpg" alt="" ></li>
  </ul>
  <ul class="flex-control-nav">
    <li>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">                     
        <defs>
          <pattern id="image1" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px">
            <image x="0" y="0"height="40px" width="40px" xlink:href="https://cdn3.iconfinder.com/data/icons/internet-and-web-4/78/internt_web_technology-13-512.png"></image>
          </pattern>
        </defs>
        <g transform="translate(40,40)">
          <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image1)"></circle>
          <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image1)"></circle>
        </g>
      </svg>
    </li>
    <li>
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">      
        <g transform="translate(40,40)">               
          <defs>
            <pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px">
              <image x="0" y="0" height="40px" width="40px"...

CSS

.myslider{ position:relative; }
.slides, .slides>li { height:450px!important; }
.flex-control-nav { z-index:999; right:5%; bottom:5%; position:absolute; text-align:right; }
.flex-control-nav li { margin:0; display:inline-block; cursor:arrow !important; width:65px; height:65px; }
.flex-control-nav:after { content:""; position:absolute; display:block; width:100%; height:65px; left:0; top:0; background:transparent; }
svg { display: table; width: 100% !important; height: 100% !important; }
circle { display:table-cell; fill:none; stroke:rgb(253,253,253); stroke-width:2; stroke-dasharray:629; vertical-align:middle; -webkit-transform-origin:0 0; transform-origin:0 0; }
.flex-active circle.progress { stroke:rgb(104,140,162); -webkit-animation:progress 25s linear; animation:progress 25s linear; -webkit-transform:rotate(-90deg) scale(1, 1); transform:rotate(-90deg) scale(1, 1); }
.flex-active circle.base { -webkit-transform:rotate(-90deg); transform:rotate(-90deg); }

@-webkit-keyframes progress {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes progress {
  from {
    stroke-dashoffset: 629;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes base {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 629;
  }
}
@keyframes base {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 629;
  }
}
.no-svg .flex-control-nav svg { display:none; }
.no-svg .flex-control-nav li { border-radius:50%; background: rgb(253,253,253); }
.no-svg .flex-control-nav li.flex-active { background:rgb(104,140,162); }

JavaScript

$('.myslider').flexslider({
        animation: "slide",
        manualControls: ".flex-control-nav li",
        slideshowSpeed: 5000,
        animationSpeed: 600,
        directionNav: false,
        controlNav: true,
        nextText: " ",
        prevText: " ",
        pauseOnHover: false,
        slideshow: true,        
        smoothHeight: false  
    });