个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 11:46:25 26 4
gpt4 key购买 nike

这是我第一次使用 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>

最佳答案

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

我已经在 fiddle 中尝试过，它正在工作。

问候

关于javascript - Bootstrap 轮播一次显示所有幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40875711/

26 4 0
文章推荐： javascript - NVDA 屏幕阅读器无法按预期切换到焦点模式
文章推荐： swift - 在运行时在 swift 中注入(inject)具体类型
文章推荐： java - 如何使用 jdom 获取子元素的属性
文章推荐： javascript - Angular Material 和 md-nav-bar 路由
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com