Question

这是我第一次使用Bootstrap Carousel，我完全按照文档说的做了，我将所有四张幻灯片放在彼此的顶部。任何提示？

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

我还包括了这个JS函数：

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

这是标题：

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

在底部我有以下内容：

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

你在div中设置了错误的类它不是 div class =＆＃34; carousel-item＆＃34; 它只是 div class =＆＃34; item＆＃34;

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

我已经在小提琴中试过了它并且它在工作。

此致

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

1 个答案: