title: Sync flex Sliders - flex-direction-nav(Arrows)
body: <p>I was working on the Slider using flex-slider. I got an Idea of syncing two flexsliders into one as we do to Owl-carousel. As the flex caption animates with the image I have to use two flexsliders because I want the flex-caption animation to differ from the image animation. I've got them synced with the help of this <a href="https://stackoverflow.com/a/10178582/8040185">Answer</a>
  But now I'm stuck at two points:</p>
  
  <p>1) I want the arrows to be synced too. As you can see in my code I have grouped the flex-direction-navs. Now I want to change both the slides on click of a button, but that does not work as it has layering on it. </p>
  
  <p>2) I want the custom targeting button to be active depending on the active slide. for example, I am on the third slide I want the third targeting anchor tag to be active, like a change of color etcetera.</p>
  
  <p>Hope I explained my problem clearly. If you need any further information please comment below.</p>
  
  <p>Here is the <a href="https://codepen.io/Wahed98666/pen/YJXvPo" rel="nofollow noreferrer">Codepen</a> link. Followed by code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
    $('#main-slider').flexslider({
      animation: "slide",
      slideToStart: 0,
      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: "slide",
      slideToStart: 0,
      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);
          }
        });
      }
  
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider-wrap {
    position: relative;
    width: 700px;
    margin: 0 auto
  }
  
  #secondary-slider {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
  }
  
  .flex-direction-nav .flex-prev,
  .flexslider:hover .flex-direction-nav .flex-prev,
  .flexslider:hover .flex-direction-nav .flex-next,
  .flex-direction-nav .flex-next {
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
  }
  
  .flexslider:hover .flex-direction-nav .flex-prev:hover,
  .flexslider:hover .flex-direction-nav .flex-prev:hover {
    opacity: 1;
  }
  
  #main-slider .flex-direction-nav .flex-prev,
  #secondary-slider .flex-direction-nav .flex-prev {
    position: absolute;
    top: 20px !important;
    right: 0 !important;
    opacity: 1;
  }
  
  #main-slider .flex-direction-nav .flex-next,
  #secondary-slider .flex-direction-nav .flex-next {
    position: absolute;
    top: 120px !important;
    right: 0;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/flexslider.css" rel="stylesheet" /&gt;
  &lt;div class="slider-wrap"&gt;
    &lt;div id="main-slider" class="flexslider"&gt;
      &lt;ul class="slides"&gt;
        &lt;li&gt;
          &lt;img src="https://via.placeholder.com/350x150" /&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="https://via.placeholder.com/350x150" /&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="https://via.placeholder.com/350x150" /&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;img src="https://via.placeholder.com/350x150" /&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div id="secondary-slider" class="flexslider"&gt;
      &lt;ul class="slides"&gt;
        &lt;li&gt;
          &lt;p&gt;Text 1&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;p&gt;Text 2&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;p&gt;Text 3&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;p&gt;Text 4&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;a rel="0" class="slide_thumb" href="#"&gt;slide link 1&lt;/a&gt;
    &lt;a rel="1" class="slide_thumb" href="#"&gt;slide link 2&lt;/a&gt;
    &lt;a rel="2" class="slide_thumb" href="#"&gt;slide link 3&lt;/a&gt;
    &lt;a rel="3" class="slide_thumb" href="#"&gt;slide link 3&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>