Bootstrap轮播一次显示所有幻灯片

Question

It's my first time using Bootstrap Carousel, I did exactly what the documentation says, I have all four slides showing on top of each other. 这是我第一次使用Bootstrap Carousel，我完全按照文档说的做了，我将所有四张幻灯片放在彼此的顶部。 Any hints? 任何提示？

            <div id="madinah-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#madinah-carousel" data-slide-to="1"></li>
                <li data-target="#madinah-carousel" data-slide-to="2"></li>
                <li data-target="#madinah-carousel" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img src="img/mad/1.jpeg" alt="Madinah first screenshot">
                </div>
                <div class="carousel-item">
                    <img src="img/mad/2.jpeg" alt="Madinah second screenshot">
                </div>
                <div class="carousel-item">
                    <img src="img/mad/3.jpeg" alt="Madinah third screenshot">
                </div>
                <div class="carousel-item">
                    <img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
                <span class="icon-prev" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
                <span class="icon-next" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

I also included this JS function: 我还包括这个JS函数：

$(function(){
$('.carousel').carousel()
});

This is the header: 这是标题：

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--- Font Awsome -->
<script src="https://use.fontawesome.com/4c7009c904.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- my CSS -->
<link rel="stylesheet" href="css/styles.css">

At the bottom of the I have the following: 在底部我有以下内容：

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>
    <script src="js/script.js"></script>

Answer 1

You have wrong classes setted in the div it's not div class="carousel-item" it's just div class="item" 你在div中设置了错误的类，它不是div class =“carousel-item”它只是div class =“item”

 <div id="madinah-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#madinah-carousel" data-slide-to="1"></li>
                <li data-target="#madinah-carousel" data-slide-to="2"></li>
                <li data-target="#madinah-carousel" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="img/mad/1.jpeg" alt="Madinah first screenshot">
                </div>
                <div class="item">
                    <img src="img/mad/2.jpeg" alt="Madinah second screenshot">
                </div>
                <div class="item">
                    <img src="img/mad/3.jpeg" alt="Madinah third screenshot">
                </div>
                <div class="item">
                    <img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
                <span class="icon-prev" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#madinah-carousel" role="button" data-slide="next">
                <span class="icon-next" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

I've tried that in fiddle and it's working. 我试过这个小提琴，它正在发挥作用。

Regards 问候

Bootstrap轮播一次显示所有幻灯片

问题描述

1 个解决方案

解决方案1
3 2016-11-29 21:37:23

Bootstrap轮播一次显示所有幻灯片

问题描述

1 个解决方案

解决方案1 3 2016-11-29 21:37:23

解决方案1
3 2016-11-29 21:37:23