홈>2020-02-26 12:55

javascript - CDN에서 부트 스트랩 캐 러셀이 작동하지 않음

과거에는 웹 디자이너 였지만 코드를 만진 지 몇 년이 지났습니다. 간단한 오류가 발생한다고 생각하지만 알아낼 수는 없습니다. 부트 스트랩 평가 텍스트 회전 목마를 포함하려고하는데 작동하지 않습니다. jQuery와 bootstrap.js는 작동하지만 회전 목마는 작동하지 않는 것 같습니다.

단기 페이지처럼 cdn을 사용하여 매우 간단하게 만들려고합니다. 또한 작동하지 않는 페이지의 관련 부분까지 모두 잘랐습니다. 문제를 해결하기 위해 무언가가 작동 할 때까지 조각을 제거하기 시작하지만 이번에는 찾을 수 없습니다. 도움을 주시면 감사하겠습니다!

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

javascriptjqueryhtmlcsstwitter-bootstrap

답변 # 1
회전식 항목의 클래스 이름은 carousel-item 입니다. item 가 아니라 . 따라서 모든 것을 변경해야합니다
```
<div class="item"> ...
```
으로
```
<div class="carousel-item">
```
<시간>
일하는 바이올린

캐 러셀 참조-부트 스트랩

Python2.net

javascript - CDN에서 부트 스트랩 캐 러셀이 작동하지 않음

관련 자료