使用按钮控制引导轮播幻灯片

Question

我想使用菜单栏控制此轮播的滚动，其中有按钮 1、2、3、4、5 当我单击它们时，轮播应该像这样滑到第二张幻灯片或第三张幻灯片。

我使用过 HTML、Bootstrap、CSS。

<div class="container-fluid">

    <div class="row" id="row1">
        <div class="col-sm-12" style="top: 10%; bottom: 50%;">
            <h1>AS</h1>
        </div>
    </div>

    <div class="row" id="row2">
        <div class="col-sm-4" style="top: 10%; bottom: 50%; background-color: white; height: 7.4vh">
            <h1 style="color: black">AS</h1>
        </div>
        <div class="col-sm-8" style="top: 10%; bottom: 50%; background-color: black">
            <div class="nav">
                <ul>
                    <li class="contact"><a href="#one">1</a></li>
                    <li class="contact1"><a href="two">2</a></li>
                    <li class="about"><a href="#three">3</a></li>
                    <li class="about1"><a href="#four">4</a></li>
                    <li class="tutorials"><a href="#five">5</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row" id="row3">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" style="vertical-align: top; position: absolute; background-color:green">
                <div class="item active" id="one">
                    <h1>ABC</h1>
                <div class="item" id="two">
                    <img src="img/B.jpg" alt="Chania">
                </div>

                <div class="item" id="three">
                    <img src="img/C.jpg" alt="Flower">
                </div>

                <div class="item" id="four">
                    <img src="img/C.jpg" alt="Flower">
                </div>

                <div class="item" id="five">
                    <img src="img/C.jpg" alt="Flower">
                </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true"></span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span>
            </a>
        </div>

    </div>

    <div class="row" id="row4">
        <div class="col-sm-12" style="top: 10%; bottom: 50%;">
            <button class="button" onclick="Contact">Contact</button>
        </div>
    </div>

</div>

Answer 1

我不确定...请检查。是你想要达到的吗？

1. 您可以将图像放置在不同的幻灯片中。

2. 然后使用the .click() method 处理click JavaScript 事件。

3. 并致电the .carousel(number) method：

将轮播循环到特定帧（从 0 开始，类似于数组）。

另见：

• the .eq() method

将匹配的元素集减少到指定索引处的元素。

• the .index() method

如果没有参数传递给 .index() 方法，则返回值是一个整数，表示 jQuery 对象中第一个元素相对于其兄弟元素的位置。

• the .find() method

获取由选择器<...>

过滤的后代<...>

• the .children() method

获取匹配元素集中每个元素的子元素，可选地由选择器过滤。

• the .parent() method

<...> 遍历 DOM 树中每个元素的直接父元素，并从匹配的元素构造一个新的 jQuery 对象。
<...> 在 DOM 树上向上移动一层。

• the .prev() method

获取前一个兄弟<...>

例如：http://codepen.io/glebkema/pen/qayLYY

var myCarousel = $('#myCarousel');
var myNav = myCarousel.prev();

myNav.find('li > a').click(function() {
  var newIndex = $(this).parent().index();
  myCarousel.carousel( newIndex );
});

myCarousel.on('slid.bs.carousel', function () {
  var newIndex = $(this).find('.carousel-inner>.active').index();
  var newLI = myNav.children().eq( newIndex );
  if ( !newLI.hasClass('active') ) {
    myNav.find('li.active').removeClass('active');
    newLI.addClass('active');
  }
});

/* Make the images wide and responsive. */
.carousel-inner img {
  height: auto;
  width: 100%;
}

/* Count nav-pills */
.nav {
  counter-reset: number;
  padding: 12px 0;
}
.nav > li > a:before {
  content: counter(number);
  counter-increment: number;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">

  <ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
    <li role="presentation"><a href="#"></a></li>
  </ul>

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://via.placeholder.com/900x300/c69/fff/?text=1" alt="">
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/900x300/9c6/fff/?text=2" alt="">
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/900x300/69c/fff/?text=3" alt="">
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/900x300/c33/fff/?text=4" alt="">
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/900x300/099/fff/?text=5" alt="">
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/900x300/f93/fff/?text=6" alt="">
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>