Flexslider 2：强制选择拇指到中间/中心

Question

问题

Flexslider是一个很好的滑块，但我在这里遇到了一些麻烦： 当我点击#main-carousel滑块中启用了asNavFor属性的滑块时，它会正确指向#main-slider，但#main-carousel中选定的幻灯片将退出视口。 我希望它留在中间。

代码

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
  $(window).on('load', function() {
    $('#main-slider').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      sync: "#main-carousel",
      smoothHeight: true
    });
    $('#main-carousel').flexslider({
      animation: "slide",
      controlNav: false,
      animationLoop: false,
      slideshow: false,
      asNavFor: '#main-slider',
      itemWidth: 120,
      itemMargin: 0,
      move: 1,
      after: function(thumbSlider) {
        console.table(thumbSlider);
        var fixed_pos = 140 * (thumbSlider.currentSlide + 1);
        console.log(fixed_pos);
      },

    });
  });

});

＆＃13;

<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.6.0/jquery.flexslider-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css" rel="stylesheet" />
<div class="box full secondo-livello-slider-container">
  <div class="secondo-livello-slider box full" id="main-slider">
    <div class="slides">
      <li>
        <img src="http://lorempixel.com/200/200" alt="Titolo Immagine 0">
      </li>
      <li>
        <img src="http://lorempixel.com/201/201" alt="Titolo Immagine 1">
      </li>
      <li>
        <img src="http://lorempixel.com/202/202" alt="Titolo Immagine 2">
      </li>
      <li>
        <img src="http://lorempixel.com/202/202" alt="Titolo Immagine 3">
      </li>
      <li>
        <img src="http://lorempixel.com/202/202" alt="Titolo Immagine 4">
      </li>
      <li>
        <img src="http://lorempixel.com/203/203" alt="Titolo Immagine 5">
      </li>
      <li>
        <img src="http://lorempixel.com/204/204" alt="Titolo Immagine 6">
      </li>
      <li>
        <img src="http://lorempixel.com/205/205/abstract/1/" alt="Titolo Immagine 7">
        <span>This Will Positionate Correctly But The Thumb Do not</span>
      </li>
      <li>
        <img src="http://lorempixel.com/206/206" alt="Titolo Immagine 8">
      </li>
      <li>
        <img src="http://lorempixel.com/207/207" alt="Titolo Immagine 9">
      </li>
    </div>
  </div>
</div>
<div class="secondo-livello-slider-carousel box full" id="main-carousel">
  <ul class="slides">
    <li>
      <img src="http://lorempixel.com/200/200" alt="Titolo Immagine 0">
    </li>
    <li>
      <img src="http://lorempixel.com/201/201" alt="Titolo Immagine 1">
    </li>
    <li>
      <img src="http://lorempixel.com/202/202" alt="Titolo Immagine 2">
    </li>
    <li>
      <img src="http://lorempixel.com/202/202" alt="Titolo Immagine 3">
    </li>
    <li>
      <img src="http://lorempixel.com/202/202" alt="Titolo Immagine 4">
    </li>
    <li>
      <img src="http://lorempixel.com/203/203" alt="Titolo Immagine 5">
    </li>
    <li>
      <img src="http://lorempixel.com/204/204" alt="Titolo Immagine 6">
    </li>
    <li>
      <img src="http://lorempixel.com/205/205/abstract/1/TryToClickMe" alt="Titolo Immagine 7">
    </li>
    <li>
      <img src="http://lorempixel.com/206/206" alt="Titolo Immagine 8">
    </li>
    <li>
      <img src="http://lorempixel.com/207/207" alt="Titolo Immagine 9">
    </li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

问题

如果您尝试单击第7个拇指，您将看到拇指将从视口中消失。 如何解决？我希望它到中心/中间。