BX滑塊 - startSlide選項

Question

我使用bx-slider作爲導航菜單。

在每張幻燈片中，我顯示4個項目，我不知道如何使用startSlide選項，以便bx-slider不會在第一張幻燈片上開始，而是在其中包含單擊項目的幻燈片中開始。

例如：

1. 項目1 |第2項|項目3 |第4項
2. 第5項|第6項|項目7 |第8項
3. 第9項|第10項|項目11 |第12項

如果我點擊第7項，我希望開始的幻燈片是幻燈片2，而不是一個。我不知道如何使用startSlide，因爲我在一張幻燈片中有4個項目。

這是我的代碼使用方法：

$('.slider').bxSlider({ 
     slideWidth: 220, 
     auto: false, 
     pause: 5000, 
     minSlides: 4, 
     nextText: '', 
     prevText: '', 
     maxSlides: 4, 
     slideMargin: 20, 
     pager:false 
    }); 

任何想法？

編輯：這是我的菜單代碼：

<ul class="slider_items"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    <li>item 7</li> 
    <li>item 8</li> 
    <li>item 9</li> 
    <li>item 10</li> 
    <li>...</li> 
</ul> 

Answer 1

您需要使用一類的活動導航菜單上。

我假設你的菜單如下

<ul> 
    <li> 
     <ul> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a></li> 
      <li><a href="">Link 3</a></li> 
      <li><a href="">Link 4</a></li> 
     </ul> 
    </li> 
    <li><!-- .closest li --> 
     <ul> 
      <li><a href="">Link 5</a></li> 
      <li><a href="">Link 6</a></li> 
      <li><a href="" class="active">Link 7</a></li> 
      <li><a href="">Link 8</a></li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li><a href="">Link 9</a></li> 
      <li><a href="">Link 10</a></li> 
      <li><a href="">Link 11</a></li> 
      <li><a href="">Link 12</a></li> 
     </ul> 
    </li> 
</ul> 

構成然後，可以將startSlide選項添加到bxSlider如下：

var startSlide = $('.active').closest('li').index()