Question

我的旋转木马工作正常，彼此之间滑动完美，但我需要将项目作为活动课程，然后滑动并单击导航栏。任何人都可以帮助我在正确的方向吗？

HTML CODE：

<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>

Answer 1

我是通过分两个阶段分解任务来实现的。从旧指示符中删除.active类并将class .active添加到新指示符。

我使用了Bosc的想法，但在第一个中增加了一个附加功能。

以下是示例：http://www.bootply.com/NTPzTEm6dn

这是jQuery：

＆＃13;

install_phantomjs()

＆＃13;

Shiny

＆＃13;

$(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");

    });
  });

});

＆＃13;

Answer 2

添加一些jquery / js，点击

添加和删除活动类

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

更新：http://www.bootply.com/nxah8CQozF没有时间来解决这个问题，它有一些错误，比如第一张幻灯片没有再次激活，但希望你能搞清楚，或者至少给你一个起点。< / p>

$(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");
  });
});

如何在导航栏上制作bootstrap轮播指示器

2 个答案: