navbar에서 부트 스트랩 캐로 셀 표시기를 만드는 방법

내 캐로 셀이 잘 작동하고 서로 완벽하게 미끄러지지만 활성 클래스로 항목을 highligt하고 navbar li을 클릭해야합니다. 누구든지 여기서 올바른 방향으로 나를 도울 수 있습니까?navbar에서 부트 스트랩 캐로 셀 표시기를 만드는 방법

HTML 코드 :

<nav class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

      <div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav"> 
        <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">slide 1</a></li> 
        <li data-target="#myCarousel" data-slide-to="1"><a href="#">slide 2</a></li> 
        <li data-target="#myCarousel" data-slide-to="2"><a href="#">slide 3</a></li> 
       </ul> 
      </div> 
     </nav>  

<div id="myCarousel" class="carousel slide"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
      <div class="wrapper"> 
       <%-- Slide 1 --%> 
      </div> 
      </div> 
      <div class="item"> 
      <div class="wrapper"> 
       <%-- Slide 2 --%> 
      </div> 
      </div> 
      div class="item"> 
      <div class="wrapper"> 
       <%-- Slide 3 --%> 
      </div> 
      </div> 
     </div> 

     <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 
    </div>

출처

2014-12-04 Daniel Leth

가 클릭에 활성 클래스를 추가하고 제거하는 몇 가지 JQuery와/JS 추가

$('.nav li').on('click', function(){ 
    $('li.active').removeClass('active'); 
    $(this).addClass('active'); 
});

갱신 : http://www.bootply.com/nxah8CQozF이를 해결하기 위해 시간 기압 해달라고, 그것을 가지고 첫 번째 슬라이드가 다시 활성화되지 않는 것과 같은 몇 가지 오류가 있지만 잘만되면 알아낼 수 있거나 적어도 시작 지점을 제공 할 수 있습니다.

$(document).ready(function() { 
    $(".carousel").carousel({ 
    interval: 5000 
    }); 
    $('#myCarousel').on('slide.bs.carousel', function() { 
    var to_slide; 
    to_slide = $(".carousel-item.active").attr("data-slide-no"); 
    $(".myCarousel-target.active").removeClass("active"); 
    $(".nav-indicators [data-slide-to=" + to_slide + "]").addClass("active"); 
    }); 
});

출처

2014-12-04 13:23:56 Bosc

내가 이미 시도했지만, 제대로 동작 doenst. –

http://www.bootply.com/nxah8CQozF 또는 활성 클래스를 변경하려면 다음 화살표와 이전 화살표가 필요하다는 의미입니까? – Bosc

예, 사용자가 이전 및 다음 화살표를 클릭하면 지금 메뉴 탭/리 –

두 단계로 작업을 나누어서 만들었습니다. 이전 표시기에서 .active 클래스를 제거하고 클래스 .active를 새 표시기에 추가하십시오.

Bosc의 아이디어를 사용했지만 첫 번째 기능에는 추가 기능이 추가되었습니다. 여기

은 예입니다 http://www.bootply.com/NTPzTEm6dn

그리고 여기 JQuery와 :

$(document).ready(function() { 
 
    $(".carousel").carousel({ 
 
    interval: 5000 
 
    }); 
 
    $('#myCarousel').on('slide.bs.carousel', function() { 
 

 

 
    $(".myCarousel-target.active").removeClass("active"); 
 

 
    $('#myCarousel').on('slid.bs.carousel', function() { 
 

 
     var to_slide = $(".carousel-item.active").attr("data-slide-no"); 
 

 
     $(".nav-indicators li[data-slide-to=" + to_slide + "]").addClass("active"); 
 

 
    }); 
 
    }); 
 

 
});

.navbar-default .navbar-nav>.active>a, 
 
.navbar-default .navbar-nav>.active>a:hover, 
 
.navbar-default .navbar-nav>.active>a:focus { 
 
    color: #555; 
 
    background-color: purple; 
 
}

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 

 

 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
     <ol class="nav navbar-nav nav-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="myCarousel-target active"><a href="#">slide 1</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class="myCarousel-target"><a href="#">slide 2</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="2" class="myCarousel-target"><a href="#">slide 3</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="3" class="myCarousel-target"><a href="#">slide 4</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="4" class="myCarousel-target"><a href="#">slide 5</a> 
 
     </li> 
 
     <li data-target="#myCarousel" data-slide-to="5" class="myCarousel-target"><a href="#">slide 6</a> 
 
     </li> 
 
     </ol> 
 
    </div> 
 
    </nav> 
 

 
    <div id="myCarousel" class="carousel slide"> 
 
    <div class="carousel-inner"> 
 
     <div data-slide-no="0" class="item carousel-item active"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 1 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="1" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 2 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="2" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 3 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="3" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 4 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="4" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 5 --%&gt; 
 
     </div> 
 
     </div> 
 
     <div data-slide-no="5" class="item carousel-item"> 
 
     <div class="wrapper"> 
 
      &lt;%-- Slide 6 --%&gt; 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"> 
 
     <span class="icon-prev"></span> 
 
    </a> 
 
    <a class="carousel-control right" href="#myCarousel" data-slide="next"> 
 
     <span class="icon-next"></span> 
 
    </a> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2016-10-20 16:47:59

navbar에서 부트 스트랩 캐로 셀 표시기를 만드는 방법

답변

관련 문제