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()