Два Flexslider слияния

Question

Я работаю с гибким слайдером.Я должен объединить два flexslider и дать один слайдер управления двумя слайдерами.Здесь все работает нормально, но ползунки управления Я хочу добавить активный класс в пользовательские ползунки управления.Кто-нибудь может подсказать, как мне поступить?

jQuery(document).ready(function($) {

  $('#main-slider').flexslider({
    animation: "slide",
    slideshow: true,
    slideToStart: 0,
    direction: "vertical",
    reverse: true,
    start: function(slider) {
      $('a.slide_thumb').click(function() {
        $('.flexslider').show();
        var slideTo = $(this).attr("rel") //Grab rel value from link;
        var slideToInt = parseInt(slideTo) //Make sure that this value is an integer;
        if (slider.currentSlide != slideToInt) {
          slider.flexAnimate(slideToInt) //move the slider to the correct slide (Unless the slider is also already showing the slide we want);
        }
      });

    }

  });

  $('#secondary-slider').flexslider({
    //animation: "fade",
    animationSpeed: 50,
    slideshow: true,
    slideToStart: 0,
    direction: "vertical",
    reverse: true,
    start: function(slider) {
      $('a.slide_thumb').click(function() {
        $('.flexslider').show();
        var slideTo = $(this).attr("rel"); //Grab rel value from link;
        var slideToInt = parseInt(slideTo) //Make sure that this value is an integer;
        if (slider.currentSlide != slideToInt) {
          slider.flexAnimate(slideToInt) //move the slider to the correct slide (Unless the slider is also already showing the slide we want);
        }

      });
    },
    before: function() {
      $('.flex-caption.flex-active-slide').addClass("animated fadeInUp");
      $('.flex-caption.flex-active-slide').attr('style', 'display: block !important');
      $('.flex-caption').hide();
    },
    after: function(slider) {
      $('.flex-caption.flex-active-slide').addClass("animated fadeInUp");
      $('.flex-caption.flex-active-slide').attr('style', 'display: block !important');
    },

  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.css" rel="stylesheet" />

<div class="sliders-wrap">
  <div class="sliders">
<div id="main-slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://preview.ibb.co/ewNfK9/3.jpg" />
    </li>
    <li>
      <img src="https://preview.ibb.co/kRYnz9/2.jpg" />
    </li>
    <li>
      <img src="https://preview.ibb.co/hGx86p/1.jpg" />
    </li>
    <li>
      <img src="https://preview.ibb.co/f0ANXU/4.jpg" />
    </li>
  </ul>
</div>

<div id="secondary-slider" class="flexslider">
  <ul class="slides">
    <li class="flex-caption">
      <p>Timberland Makes the best Shoes shoes</p>
    </li>
    <li class="flex-caption">
      <p>Keep it trendy with Converse</p>
    </li>
    <li class="flex-caption">
      <p>Timberland Makes the best Shoes shoes</p>
    </li>
    <li class="flex-caption">
      <p>Keep it trendy with Converse</p>
    </li>
  </ul>
</div>
<div class="slider-controls">
  <!-- custom slide controls same for the both sliders -->
  <div class="custom-direction-nav">
    <a rel="0" class="slide_thumb" href="#">01</a>
    <a rel="1" class="slide_thumb" href="#">02</a>
    <a rel="2" class="slide_thumb" href="#">03</a>
    <a rel="3" class="slide_thumb" href="#">04</a>
  </div>
</div>
  </div>
</div>

custom-direction-nav нажмите на эту кнопку, и я просто хочу добавить активный класс здесь.