javascript - 从 CDN 加载的 Bootstrap Carousel 无法正常工作-6ren

javascript - 从 CDN 加载的 Bootstrap Carousel 无法正常工作

转载作者：行者123 更新时间：2023-11-28 03:46:47

27

4

我过去是一名网页设计师，但我已经好几年没有接触过任何代码了。我想我犯了一个简单的错误，但我无法弄清楚。我正在尝试包含 Bootstrap 推荐文本轮播，但它不起作用。看起来 jQuery 和 bootstrap.js 确实可以工作，但 carousel 却不能。

我试图通过使用 CDN 使其变得 super 简单，因为这只是一个短期页面。我还把它全部削减到页面中不起作用的相关部分。我经常开始删除碎片，直到有办法解决问题，但这次我找不到它。非常感谢任何帮助!

<!DOCTYPE html>

见证测试 /* 轮播 */

    #quote-carousel {
        padding: 0 10px 30px 10px;
        margin-top: 30px;
    }
    /* indicator position */

    #quote-carousel .carousel-indicators {
        right: 50%;
        top: auto;
        bottom: -10px;
        margin-right: -19px;
    }
    /* indicator color */

    #quote-carousel .carousel-indicators li {
        background: #c0c0c0;
    }
    /* active indicator */

    #quote-carousel .carousel-indicators .active {
        background: #333333;
        height: 10px;
        width: 10px;
        margin-bottom: 1px;
    }
</style>

<!-- FANS-->
<section id="fans">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="p-5">
                    <img class="img-fluid rounded-circle" src="img/fans.png" alt="">
                </div>
            </div>
            <div class="col-lg-6 order-lg-1">
                <div class="p-5">
                    <h2 class="display-4">Fans</h2>

                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="carousel slide" data-ride="carousel" id="quote-carousel">

                                    <!-- Bottom Carousel Indicators -->
                                    <ol class="carousel-indicators">
                                        <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#quote-carousel" data-slide-to="1"></li>
                                        <li data-target="#quote-carousel" data-slide-to="2"></li>
                                    </ol>

                                    <!-- Carousel Slides / Quotes -->
                                    <div class="carousel-inner">

                                        <!-- Quote 1 -->
                                        <div class="item active">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.&rdquo;</p>
                                                    <small><strong>Vulputate M., Dolor</strong></small>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Quote 2 -->
                                        <div class="item">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <p>&ldquo;Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.&rdquo;</p>
                                                    <small><strong>Fringilla A., Vulputate Sit</strong></small>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Quote 3 -->
                                        <div class="item">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <p>&ldquo;Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.&rdquo;</p>
                                                    <small><strong>Aenean A., Justo Cras</strong></small>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

<!-- Bootstrap core JavaScript-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        //carousel options
        $('#quote-carousel').carousel({
            pause: true,
            interval: 10000,
        });
    });
</script>

最佳答案

轮播元素的类名称是 carousel-item 而不是 item。所以你应该改变每一个

<div class="item"> ...

进入

<div class="carousel-item">

<小时/>

Working Fiddle

Carousel Reference - Bootstrap

关于javascript - 从 CDN 加载的 Bootstrap Carousel 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48390098/

27

4

0

文章推荐： javascript - 去掉json格式文件中的双引号

文章推荐： javascript - 带变量的 Img src url

文章推荐： javascript - Multer 尝试创建一个已存在的新文件夹

cdn - 如何使用语义UI CDN？
如何使用 CDN 将语义 UI 包含到 HTML 页面？ CDN链接为https://cdnjs.com/libraries/semantic-ui ，但是怎么使用呢？最佳答案您只需复制要用于语义
cdn - 谷歌云 CDN、存储和容器引擎问题与后端服务
我有一个我似乎无法解决的特定用例。典型的 gcloud 设置: K8S集群一个 gcloud 存储桶 gcloud 负载均衡器我设法获得了我的域 https://cdn.foobar.com/u
cdn - 使用内容分发网络 (CDN) 的优点和缺点是什么？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
cdn - Windows Azure CDN 中的更新文件
我有 blob 存储和 CDN 端点，用于存储我的静态内容。现在我想更新 app.js 文件，因为它被修改了，但是当我将此文件写入 blob 时，CDN 仍然给我旧的 app.js 文件。如何更新我
cdn - 通用组件/文件的 CDN 列表
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
cdn - 如何强制清除或失效 Azure CDN 内容？
出于性能原因，我希望通过 Azure CDN 提供很少更改的内容。但是，当内容确实发生变化时，更新的数据立即可用很重要。理想情况下，我可以设置一个长 TTL，然后在我更新内容时主动告诉 CDN 使内容
cdn - Requirejs 的顺序不适用于优先级配置和 CDN 依赖项
以下main.js代码不遵守优先级顺序(有时underscore.js在backbone.js需要时不会加载它): require({ baseUrl:'/scripts', prio
azure-cdn - Azure CDN 端点名称可以重复使用吗？
为什么我不能重用以前删除的端点的名称？例如，如果我创建一个名为“acme-cdn1”的端点，将其删除，然后尝试创建一个具有相同名称的新端点，我会收到以下消息:“错误，该端点名称已经存在。”是否有必要删
jQuery Mobile CDN 与本地 CDN
我不确定我是否使用 CDN 还是本地。本地是否意味着jquery资源需要安装在智能手机上，以便离线应用程序成为可能？最佳答案在这种情况下，本地意味着您自己托管文件(作为网站的一部分)，而不是依赖
cdn - 为什么建议从 CDN 加载 jQuery 或任何其他库？
一种不言自明的问题:为什么建议从 CDN 加载 jQuery 或任何其他库？最佳答案 CDN 将比您的服务器更快。服务器具有最大连接数。浏览器将同时请求的数量限制在单个域中。将您的库卸载到 CDN
cdn - CDN 的 Amazon CloudFront 替代方案？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
cdn - Google AMP 缓存是免费的 CDN 服务吗？
我知道 Google AMP 缓存会缓存网站的有效 AMP 页面和资源文件，并通过 .cdn.ampproject.org/提供它们。我做了一些测试，它对我的网站运行良好。我在一家受欢迎的网站工
cdn - 是否有任何 CDN 允许重写请求 URI，以便客户端路由与浏览器刷新配合得很好？
我有一个用静态 html/js/css 编写的 HTML5 应用程序(它实际上是用 Dart 编写的，但会编译成 javascript)。我通过 CDN 提供应用程序文件，REST api 托管在一个
php - 直接访问 CDN 域时从 CDN 重定向到主网站？
我不太确定如何防止谷歌将我的 CDN 域与我的主域名混合编入索引。我想在直接访问 CDN 域时通过 .htaccess 重定向到主域。事实: 两个域都指向文件系统中的同一个位置。两者共享相同的 r
google-cdn - 如何测试 Google AMP 项目的 CDN？
引自此处:https://www.ampproject.org/docs/get_started/about-amp.html AMP is a way to build web pages for
azure - Microsoft Azure CDN 是真正的 CDN 还是完全是别的东西？
我刚刚尝试设置 Azure CDN 帐户，到目前为止(现在已经持续了四个小时)我还无法让它返回除 400 和 404 错误之外的任何内容。如果这是一个真正的 CDN，我需要做的就是将 CDN 指向我
cdn - 通过 CDN 为 protected Assets 提供服务
我们希望提供来自少数可用 AWS 区域的大量视频文件。目标受众来自全局多个地点。不保证连接速度。因此，绝对需要 CDN(最好是 CloudFront)。视频需要受到保护，因此只有在用户经过身份验证和
cdn - 是否有托管 Google Code Pretify 的内容分发网络 (CDN)？
有没有content delivery network (CDN)正在托管google-code-prettify ？我正在 TypePad 上建立一个博客如果可能的话，希望利用 CDN。最佳答案
cdn - 将 CDN 与 ember-cli 结合使用
在我的应用程序中，使用 ember-cli 开发，我还需要一些外部资源，例如 bootstrap；现在我通过 Brocfile 导入它: app.import('bower_components/bo
cdn - 有没有像 960GS 这样的 CSS 框架的 CDN？
我想知道是否有像 960GS 这样的 CSS 框架的 CDN。因为我认为很多人都在使用它。最佳答案我还没有尝试过 cachedcommons.org，但他们有一个 960 的链接，听起来像你所要求

首页

博学

6Ren·AI

商城

javascript - 从 CDN 加载的 Bootstrap Carousel 无法正常工作