0

我使用 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>
4

1 回答 1

0

您需要在活动导航菜单上使用一个类。

我假设您的菜单结构如下

<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()
于 2013-04-04T09:51:47.103 回答