html - 使用按钮控制 Bootstrap 轮播幻灯片

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 :

Cycles the carousel to a particular frame (0 based, similar to an array).

另见:

• the .eq() method

Reduce the set of matched elements to the one at the specified index.

• the .index() method

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

• the .find() method

Get the descendants <...> filtered by a selector <...>

• the .children() method

Get the children of each element in the set of matched elements, optionally filtered by a selector.

• the .parent() method

<...> traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
<...> travels a single level up the DOM tree.

• the .prev() method

Get the immediately preceding sibling <...>

例如: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>