Question

我正在使用bx-slider作为导航菜单。

在每张幻灯片中，我显示4个项目，我不知道如何使用startSlide选项，以便bx-slider不会在第一张幻灯片上启动，而是包含一个包含点击项目的幻灯片。

例如：

第1项|第2项|第3项|第4项
第5项|第6项|第7项|第8项
第9项|第10项|第11项|第12项

如果我点击第7项，我希望起始幻灯片是2，而不是1。我不知道如何使用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()

BX Slider - startSlide选项

1 个答案: