Question

我过去曾是一名网页设计师，但距离任何代码都已经过了几年。我想我正在犯一个简单的错误，但我无法弄清楚。我正在尝试包含一个bootstrap Testimonial Text Carousel，但它不起作用。确实看起来jQuery和bootstrap.js正在工作，但旋转木马却没有。

我试图通过使用cdn来使它变得非常简单，因为它只是一个短期页面。我也把它全部切成了页面中没有用的相关部分。我经常开始删除碎片，直到有问题可以解决这个问题，但这次我找不到它。非常感谢任何帮助！

<!DOCTYPE html>

见证测试 / * carousel * /

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

Answer 1

轮播项目的类名称为carousel-item而非item。所以你应该改变每一个

<div class="item"> ...

进入

<div class="carousel-item">

Working Fiddle

Carousel Reference - Bootstrap

从CDN加载Bootstrap Carousel Not Working

1 个答案: