シンプルなスライダーでアクティブなスライドを確認しようとしています

Question

私は、リストを利用し、ビューポート内に2番目のリスト項目を保持する非常に単純なフルページスライダーを作っています。しかし、今私は "アクティブ"スライドにクラス（例えば、 "アクティブ"のような）を与える方法を見つけようとしました。 2番目の李が常にアクティブなものであることを知っているので、私はn番目の児童を対象にして（2）、何とかそれを積極的なクラスにしようとしましたが、残念ながらそれを働かせることはできません試してみてください）。

私には見えない簡単な方法はありますか？

CodePenが必ずあなたのコードに変数を追加HERE

HTML

<div id="slider"> 
    <ul> 
    <li> 
     <h1>Slide 1</h1> 
     <a href="" class="slider__next">Go to slide 2</a> 
    </li> 
    <li> 
     <h1>Slide 2</h1> 
     <a href="" class="slider__next">Go to slide 3</a> 
    </li> 
    <li> 
     <h1>Slide 3</h1> 
     <a href="" class="slider__next">Go to slide 4</a> 
    </li> 
    <li> 
     <h1>Slide 4</h1> 
     <a href="" class="slider__next">Go to slide 5</a> 
    </li> 
    <li> 
     <h1>Slide 5</h1> 
     <a href="" class="slider__next">Go to slide 1</a> 
    </li> 
    </ul> 
</div> 

CSS

#slider { 
    position: relative; 
    overflow: hidden; 
    margin: 0 auto 0 auto; 
    height: 100%; 
    width: 100%; 
    ul { 
     position: relative; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 100%; 
    width: 100%; 
    li { 
     height: 100%; 
     width: 100%; 
     position: relative; 
     display: block; 
     background-color: gray; 
     float: left; 
     margin: 0; 
     padding: 0; 
     overflow: scroll; 
     .content__container { 
       max-width: 55%; 
       margin: 15% auto 0 auto; 
       h1 { 
        color: #fff; 
       } 
      } 
      .navArrow__right { 
       display: flex; 
       align-items: center; 
       position: fixed; 
       top: 50%; 
      right: 30px; 
      -webkit-transform: translateY(-50%); 
      -moz-transform: translateY(-50%); 
      -ms-transform: translateY(-50%); 
      transform: translateY(-50%); 
      p { 
        font-size: 18px; 
        line-height: 26px; 
        margin-bottom: 0; 
        margin-right: 30px; 
        max-width: 140px; 
       } 
      } 
    } 
    } 
} 

jQueryの

initSlider(); 

$('#slider ul li:last-child').prependTo('#slider ul'); 

$(window).resize(function(){ 
    initSlider(); 
}); 

$('.slider__next').click(function() { 
    event.preventDefault(); 
    moveRight(); 
}); 

//Slider init 
function initSlider() { 
    var slider = $('#slider'); 
    var sliderUl = slider.find('ul'); 
    var sliderItems = slider.find('ul li'); 
    var sliderCount = $('#slider ul li').length; 
    var viewportHeight = $(window).outerHeight(); 
    var viewportWidth = $(window).outerWidth(); 
    slider.css({ 
    width: viewportWidth, 
    height: viewportHeight, 
    }); 
    sliderUl.css({ 
    width: sliderItems.outerWidth() * sliderCount, 
    height: viewportHeight, 
    marginLeft: - viewportWidth, 
    }); 
    sliderItems.css({ 
    width: viewportWidth, 
    height: viewportHeight, 
    }); 
} 

//Slider next and slider prev controls 
function moveRight() { 
    var viewportWidth = $(window).outerWidth(); 
    $('#slider ul').animate({ 
    left: - viewportWidth 
    }, 500, function() { 
    $('#slider ul li:first-child').appendTo('#slider ul'); 
    $('#slider ul').css('left', ''); 
    }); 
} 

Answer 1

です

var current = 0; 

moveRight() { 
    if(current <= sliderCount) { // not sure atm if silderCount or sliderCount - 1 
    current++; 
    } else { 
    current = 0; 
    } 
    sliderItems.removeClass('active'); // remove all actives 
    $(sliderItems[current]).addClass('active'); // set active 
} 

のない最高のjsの後にすべての私見これは、すべて1つのプロトタイプか何かをする必要がありますが、私はそれはあなたの moveRight関数に小さなアップデートから activeクラスを削除するために使用することができ

Answer 2

動作すると思いますので、以前にアクティブなスライドと現在のスライドにactiveクラスを追加します。

function moveRight() { 
    var viewportWidth = $(window).outerWidth(); 
    $('#slider ul').animate({ 
     left: - viewportWidth 
    }, 500, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 

     // update active slide 
     $('#slider ul li.active').removeClass('active'); 
     $('#slider ul li:nth-child(2)').addClass('active'); 
    }); 
    } 

更新CodePen hereです。