OWLCAROUSEL未显示

Question

我尝试制作旋转木马，但是出了点问题，并且没有显示图像。

如果我删除了 loop：true ，则会显示图像，但显示不正确。

问题或错误在哪里？

如何正确显示图像？

是否存在代码错误或包含缺少某些文件？

        $(document).ready(function(){
            $(".banner").owlCarousel({
            items: 1,
            nav: true,
            loop: true
            });
        });

.banner-item {
    position: relative;
    height: 100vh;
    z-index: -1;
}
.banner-item:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0;
}
.banner-item h1 {
    margin:0;
    padding:0;
    background-position: center;
    background-size: cover;
}
.banner-data {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    text-align: center;
}
.banner-data h1 {
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    font-family: raleway-bold;
}
.banner-data p {
    color: #fff;
    background-color: #3498db;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0px 10px;
    font-size: 20px;
    font-family: raleway-regular;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
   <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>

    <div class="banner">
        <div class="banner-item" style="background-image: url(http://lorempixel.com/640/200/nature);">
            <div class="banner-data">
                <h1>HEADER TEXT - 1</h1>
                <p>HEADER PARAGRAPH - 1</p>
            </div>
        </div>
        <div class="banner-item" style="background-image: url(http://lorempixel.com/640/200/nature);">
            <div class="banner-data">
                <h1>HEADER TEXT - 1</h1>
                <p>HEADER PARAGRAPH - 1</p>
            </div>
        </div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

Answer 1

最后，我修复了自己的问题。

        $(document).ready(function() {
            $(".banner").owlCarousel({
                loop: true,
                nav: true,
                items: 1,
                autoplay: false,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,

            });
        });

/* OWL CAROUSEL STYLE */
.banner {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    box-shadow: 0px 0px 3px #ccc;
    outline: 1px solid #ccc;
    display: flex;
}
.banner img {
    max-width: 100%;
    height: auto;
}

.banner-item {
    position: relative;
    height: 100vh;
    z-index: -1;
    background-position: center;
    background-size: cover;
}
.banner-item:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    top: 0;
    left: 0;
}
.banner-item h1 {
    margin:0;
    padding:0;
}
.banner-data {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    text-align: center;
}
.banner-data h1 {
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    font-family: raleway-bold;
}
.banner-data p {
    color: #fff;
    background-color: #3498db;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 0px 10px;
    font-size: 20px;
    font-family: raleway-regular;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    padding: 10px 15px;
    font-size: 100px;
    font-family: oxygen-regular;
    text-transform: uppercase;
    font-weight: 100;
    color: #aaa;
}

.owl-carousel .owl-controls button.owl-dot {
    display: inline-block;
    margin: 0px 2.5px;
    height: 25px;
    width: 25px;
    background: #fff;
}
.owl-carousel .owl-controls button.owl-dot.active {
    background-color: blue;
    height: 20px;
    width: 20px;
    transition: .4s;
}
.owl-carousel .owl-nav button.owl-prev {
    left: 20px;
}
.owl-carousel .owl-nav button.owl-next {
    right: 20px;
}

        <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
        <div class="banner owl-carousel">
    
            <div class="banner-item" style="background-image: url(http://lorempixel.com/1920/400/nature);">
                <div class="banner-data">
                    <h1>HEADER TEXT - 1</h1>
                    <p>HEADER PARAGRAPH - 1</p>
                </div>
            </div>
            <div class="banner-item" style="background-image: url(http://lorempixel.com/1920/400/nature);">
                <div class="banner-data">
                    <h1>HEADER TEXT - 2</h1>
                    <p>HEADER PARAGRAPH - 2</p>
                </div>
            </div>
    
        </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>