jquery - 如何在导航栏上制作 Bootstrap 轮播指示器

我的旋转木马工作正常，并且在彼此之间完美滑动，但我需要将元素突出显示为事件类，然后滑动到并单击导航栏 li a。任何人都可以在这里帮助我朝着正确的方向前进吗？

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>

最佳答案

我通过将任务分为两个阶段来做到这一点。从旧指标中删除 .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>

关于jquery - 如何在导航栏上制作 Bootstrap 轮播指示器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27294779/

jquery - 如何在导航栏上制作 Bootstrap 轮播指示器

上一篇：jquery - symfony2 Twig : best pratice for highlighting a navbar when on the right page

下一篇：css - Web Essentials 在不同计算机上编译时输出不同