Question

假设我有10个图像轮播滑块。当我点击第二张幻灯片点导航时，一张幻灯片上升，下一张幻灯片进入视图。如果我点击数字9幻灯片导航仍然会有一张幻灯片上升，下一张幻灯片将会显示在视图中。

为什么会这样？

这是我的代码：

<div id="main" class="carousel slide" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li data-target="#main" data-slide-to="0" class="active"></li>
                        <li data-target="#main" data-slide-to="1"></li>
                        <li data-target="#main" data-slide-to="2"></li>
                        <li data-target="#main" data-slide-to="3"></li>
                    </ul>


                    <div class="carousel-inner" role="listbox">

                        <!--item 01-->
                        <div class="item active">
                            <img src="./img/ca01.jpg" alt="maincarouselimg01" title="ca01.jpg">
                        </div>
                        <!--item 02-->
                        <div class="item">
                            <img src="./img/ca02.jpg" alt="maincarouselimg02" title="ca02.jpg">
                        </div>
                        <!--item 03-->
                        <div class="item">
                            <img src="./img/ca03.jpg" alt="maincarouselimg03" title="ca03.jpg">
                        </div>
                        <!--item 04-->
                        <div class="item">
                            <img src="./img/ca04.jpg" alt="maincarouselimg04" title="ca04.jpg">
                        </div>

                    </div>
                </div>

Answer 1

一切正常！

.item { width:100%; height:755px; overflow:hidden; } .item img { width:100%; height:100%; } .carousel-indicators { bottom:-6px; } #main .carousel-indicators li { background-color: #000; } #main .carousel-indicators .active { background-color: #808080; }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div id="main" class="carousel slide" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li data-target="#main" data-slide-to="0" class="active"></li>
                        <li data-target="#main" data-slide-to="1"></li>
                        <li data-target="#main" data-slide-to="2"></li>
                        <li data-target="#main" data-slide-to="3"></li>
                    </ul>


                    <div class="carousel-inner" role="listbox">

                        <!--item 01-->
                        <div class="item active">
                            <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="maincarouselimg01" title="ca01.jpg">
                        </div>
                        <!--item 02-->
                        <div class="item">
                            <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="maincarouselimg02" title="ca02.jpg">
                        </div>
                        <!--item 03-->
                        <div class="item">
                            <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="maincarouselimg03" title="ca03.jpg">
                        </div>
                        <!--item 04-->
                        <div class="item">
                            <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="maincarouselimg04" title="ca04.jpg">
                        </div>

                    </div>
                </div>
</body>
</html>

Bootstrap轮播图像幻灯片上升错误

1 个答案: