Навигационные точки не активны

Question

В моем слайдере у меня есть пара точек навигации. Каждый раз, когда вы переходите к новому слайдеру, следующая точка становится синей, что означает, что она активна. Проблема, с которой я сталкиваюсь, заключается в том, что когда я перехожу к следующему слайду, все мои точки становятся неактивными.

Мой HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-wrapper"> 
<div class="banner_wrapper active_banner" style="opacity: 1; left: 0%;"> 
    <img class="bgwidth" src="http://i.imgur.com/YW5Y1YX.jpg"> 
</div> 
<div class="banner_wrapper inactive_banner" style="opacity: 0; left: 100%;"> 
    <img class="bgwidth" src="http://i.imgur.com/vFEg6ef.jpg"> 
</div> 
<div class="banner_wrapper inactive_banner" style="opacity: 0; left: -100%;"> 
    <img class="bgwidth" src="http://i.imgur.com/cEcFlSA.jpg"> 
</div> 
<a class="left-arrow nav_arrows" href="javascript:void(0);"> 
    <img src="http://i.imgur.com/6UVHSG4.png"> 
</a> 
<a class="right-arrow nav_arrows" href="javascript:void(0);"> 
    <img src="http://i.imgur.com/pbt7K94.png"> 
</a> 
<div class="banner-nav-wrapper"> 
    <a class="active_inside" href="javascript:void(0);"> 
    <span></span> 
    </a> 
    <a class="inactive_inside" href="javascript:void(0);"> 
    <span></span> 
    </a> 
    <a class="inactive_inside" href="javascript:void(0);"> 
    <span></span> 
    </a> 
</div> 

Мой CSS

html{ 
    background: black; 
    } 

    .banner_wrapper img{ 
    position: absolute; 
    } 

    .banner-nav-wrapper { 
    left: 46%; 
    position: absolute; 
    top: 80%; 
    } 

    .banner-nav-wrapper a{ 
    display:block; 
    width:13px; 
    height:14px; 
    background:url(http://i.imgur.com/J8UrHgn.png) top left no-repeat; 
    float:left; 
    margin:0 5px 0 0; 
    } 

    .banner-nav-wrapper a.active_inside span{ 
    display:block !important; 
    background:url(http://i.imgur.com/NxoSIbh.png) top left no-repeat; 
    width:100%; 
    height:100%; 
    } 

    .banner-nav-wrapper a.inactive_inside span{ 
    display:block !important; 
    background:url(http://i.imgur.com/J8UrHgn.png) top left no-repeat; 
    width:100%; 
    height:100%; 
    } 

    .banner-nav-wrapper a span{ 
    display:none; 
    width:100%; 
    height:100%; 
    background:url(http://i.imgur.com/NxoSIbh.png) top left no-repeat; 
    } 


    .left-arrow { 
    background: none repeat scroll 0 0 black; 
    left: 5.2%; 
    position: absolute; 
    top: 27%; 
    z-index: 1; 
    } 

    .left-arrow img{ 
    position: relative; 
    } 

    .right-arrow { 
    background: none repeat scroll 0 0 black; 
    position: absolute; 
    right: 5.2%; 
    top: 27%; 
    } 

    .right-arrow img{ 
    position: relative; 
    } 

Мои JS

$(".nav_arrows").click(function(){ 

    $direction = ($(this).hasClass("left-arrow") ? "left" : "right"); 
    var activeBanner = 100; 

    if($direction == "right"){ 
    $(".inactive_banner").css("left","100%").show(); 
    activeBanner = -100; 
    if($(".active_banner").next(".banner_wrapper").length < 1){ 
     $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){ 
     $(this).addClass("active_banner").removeClass("inactive_banner"); 
     }); 
     $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside"); 
    }else{ 
     $(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){ 
     $(this).addClass("active_banner").removeClass("inactive_banner"); 
     }); 
     $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");   
    } 
    }else{ //left 
    $(".inactive_banner").css("left","-100%").show().fadeTo(250, 0); 
    if($(".active_banner").prev().length < 1){ 
     $(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){ 
     $(this).addClass("active_banner").removeClass("inactive_banner"); 
     }); 
     $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");   
    }else{ 
     $(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){ 
     $(this).addClass("active_banner").removeClass("inactive_banner"); 
     }); 
     $(".banner-nav-wrapper a").addClass("active_inside").removeClass("inactive_inside");   
    } 
    } 

    $(".active_banner").animate({"left":activeBanner+"%","opacity":0}, 500,function(){ 
    $(this).addClass("inactive_banner").removeClass("active_banner"); 
    $(".banner-nav-wrapper a").addClass("inactive_inside").removeClass("active_inside");  
    }); 
}); 

и вот ссылка на демо: CODEPEN

Answer 1

Проблемы вы добавления и удаление класса из всех «s .Instead вы должны удалить класс только из ранее выбранного и надстройки класса только к следующему .I просто добавили механизм поиска следующего. Вашего код JS выглядит следующим образом:

$(".nav_arrows").click(function(){ 

     $direction = ($(this).hasClass("left-arrow") ? "left" : "right"); 
     var activeBanner = 100; 
     var nextButton; 
     if($direction == "right"){ 
      $(".inactive_banner").css("left","100%").show(); 
      activeBanner = -100; 
      if($(".active_banner").next(".banner_wrapper").length < 1){ 
       $(".banner_wrapper").eq(0).animate({"left":0+"%","opacity":1}, 500,function(){ 
        $(this).addClass("active_banner").removeClass("inactive_banner"); 
       }); 
     nextButton = $(".banner-nav-wrapper a").eq(0); 

      }else{ 
       $(".active_banner").next().animate({"left":0+"%","opacity":1}, 500,function(){ 
        $(this).addClass("active_banner").removeClass("inactive_banner"); 
       }); 
    nextButton = $(".banner-nav-wrapper .active_inside").next(); 

      } 
     }else{ //left 
      $(".inactive_banner").css("left","-100%").show().fadeTo(250, 0); 
      if($(".active_banner").prevAll().length < 1){ 
       $(".banner_wrapper").eq($(".banner_wrapper").length-1).animate({"left":0+"%","opacity":1}, 500,function(){ 
        $(this).addClass("active_banner").removeClass("inactive_banner"); 
       }); 
     nextButton = $(".banner-nav-wrapper a").eq($(".banner_wrapper").length-1); 

      }else{ 
       $(".active_banner").prev().animate({"left":0+"%","opacity":1}, 500,function(){ 
        $(this).addClass("active_banner").removeClass("inactive_banner"); 
       }); 
     nextButton = $(".banner-nav-wrapper .active_inside").prev(); 

      } 
     } 
      $(".active_banner").animate({"left":activeBanner+"%","opacity":0}, 500,function(){ 
    $(this).addClass("inactive_banner").removeClass("active_banner"); 
    $(".banner-nav-wrapper .active_inside").addClass("inactive_inside").removeClass("active_inside"); 
     nextButton.addClass("active_inside").removeClass("inactive_inside");  
    }); 

    }); 

и вот ссылка на демо: CODEPEN