2

カルーセルの最初に表示されたスライドでカルーセルを選択状態にしようとしています。

JSFiddle
DEMO

HTML

<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
  <div class='swipe-wrap'>
    <div><b>0</b></div>
    <div><b>1</b></div>
    <div><b>2</b></div>
    <div><b>3</b></div>
    <div><b>4</b></div>
    <div><b>5</b></div>
  </div>
</div>

<nav>
    <ul id="nav">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
</nav>

<div style='text-align:center;padding-top:20px;'>
  
  <button id ="mySwipePrev">prev</button> 
  <button id ="mySwipeNext">next</button>

</div>
4

1 に答える 1

2

次を使用して、最初の要素にselectedクラスを追加できます。li

$("#nav li").eq(0).addClass("selected");

そして、代わりににcallback基づいて選択するように関数のコードを変更しました:indexindex-1

$Elements.eq(index).addClass("selected");

そして、prevボタンクリックイベントの場合にコードを変更して、代わりににnext基づいて選択しました：mySwipe.getPos()mySwipe.getPos()-1

$('#mySwipePrev').on('click', function () {
       mySwipe.prev();
       $navLi.removeClass('selected');
       $navLi.eq(mySwipe.getPos()).addClass('selected');
   });
   $('#mySwipeNext').on('click', function () {
       mySwipe.next();
       $navLi.removeClass('selected');
       $navLi.eq(mySwipe.getPos()).addClass('selected');
   });

ナビゲーションli要素（0、1、2、3、4 ..）をクリックすると、$(this).index()代わりに使用します$(this).index()+1（インデックスに+1を追加します）

$navLi.on ('click', function () {
        window.mySwipe.slide($(this).index(), 200);
        
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    });

DEMO FIDDLE

于 2013-09-19T18:20:16.633 に答える