0

ナビゲーション メニューとして bx-slider を使用しています。

startSlide各スライドに 4 つの項目を表示していますが、bx-slider が最初のスライドではなく、クリックされた項目を含むスライドで開始するようにオプションを使用する方法がわかりません。

例えば：

  1. 項目 1 | 項目 2 | 項目 3 | 項目4
  2. 項目 5 | 項目 6 | 項目 7 | 項目8
  3. 項目 9 | 項目 10 | 項目 11 | アイテム12

項目 7 をクリックした場合、最初のスライドを 1 枚ではなく 2 枚にしたいと思います。startSlide1枚のスライドに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 に答える