网站Owl-Carousel轮播图无法单张显示问题求助

问题描述 #

使用Owl-Carousel时，轮播图未按预期单张展示，所有幻灯片同时显示，页面被拉伸。已尝试调整JS配置（如items、loop参数）、修改CSS容器及滑块项样式，均未解决问题。

错误截图 #

相关代码 #

JavaScript代码 #

$(document).ready(function() {
    //for testimonial
    var owl = $('.owl-testmonial');
    owl.owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        margin: 10,
        autoplay: true,
        autoplayTimeout: 2500,
        autoplayHoverPause: true
    });
});

CSS代码 #

body {
    font-family: Arial, sans-serif;
    margin: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.testmonial {
    background-image: url(images/testimonial-bg.jpg);
    position: relative;
    background-repeat: no-repeat;
}

.testmonial:after {
    content: "";
    background: #1baaba;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .6;
    z-index: 1;
}

.owl-wrapper {
    padding: 80px 20px;
    z-index: 999;
    position: relative;
}

.owl-testmonial {
    background: #FFF;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 25px;
    position: unset;
}

.owl-testmonial:before {
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    text-align: center;
    display: block;
    font-size: 92px;
    color: #e7e7e7;
    margin-top: -106px;
}

.owl-testmonial .owl-prev {
    position: absolute;
    left: 0;
    top: 45%;
    font-size: 36px !important;
    border: 1px solid #FFF !important;
    width: 33px !important;
    height: 36px !important;
    line-height: 17px !important;
    color: #FFF;
}

.owl-testmonial .owl-next {
    position: absolute;
    right: 0;
    top: 45%;
    font-size: 36px !important;
    border: 1px solid #FFF !important;
    width: 33px !important;
    height: 36px !important;
    color: #FFF;
    line-height: 17px !important;
}

nav {
    overflow: hidden;
    background-color: #333;
}

nav.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

nav ul {
    display: flex;
    list-style: none;
    margin: 0;
}

nav li {
    margin: 0 30px;
}

nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

nav a:hover {
    background-color: #ffeb3b;
    color: black;
}

a.active {
    background-color: #2196f3;
    color: white;
}

.content {
    padding: 20px;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky+.content {
    padding-top: 60px;
}

.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
    background-color: #fff;
    width: 30%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    float: left;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
}

button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #ffeb3b;
    color: #2196f3;
    border-radius: 10px;
    border: 1px solid #2196f3;
    margin-top: 20px;
    cursor: pointer;
}

.office-map {
    margin-top: 50px;
}


/* Responsive styles */

@media screen and (max-width: 992px) {
    nav li {
        margin: 0 10px;
    }
    .benefit-card,
    .product,
    .testimony,
    .news-item,
    .suggestion-box {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    header {
        height: 60vh;
    }
    nav {
        top: 60vh;
    }
    .benefit-card,
    .product,
    .testimony,
    .news-item,
    .suggestion-box {
        width: 90%;
    }
}

@media screen and (max-width: 576px) {
    header {
        height: 40vh;
    }
    nav {
        top: 40vh;
    }
    .benefit-card,
    .product,
    .testimony,
    .news-item,
    .suggestion-box {
        width: 95%;
    }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Add JS for owl carousel -->
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>My Homepage</title>
</head>

<body>
    <div class="testmonial">
        <div class="container">
            <div class="owl-wrapper">
                <div class="owl-carousel owl-testmonial">
                    <div class="slide-item">
                        <img src="testimony/slider1585663811.png" alt="Slide 1">
                    </div>

                    <div class="slide-item">
                        <img src="testimony/slider1589942091.png" alt="Slide 2">
                    </div>
                    <div class="slide-item">
                        <img src="testimony/slider1590030001.png" alt="Slide 3">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 7 items sticky menu bar -->
    <nav id="navbar">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about-us">About Us</a></li>
            <li><a href="#tabungan">Tabungan</a></li>
            <li><a href="#kredit">Kredit</a></li>
            <li><a href="#deposito">Deposito</a></li>
            <li><a href="#berita">Berita</a></li>
            <li><a href="#pengajuan-kredit">Pengajuan Kredit</a></li>
        </ul>
    </nav>
    <main class="content">
        <!-- 3 static benefits -->
        <section class="benefits">
            <div class="card">
                <h3>Benefit 1</h3>
                <p>Description</p>
            </div>
            <div class="card">
                <h3>Benefit 2</h3>
                <p>Description</p>
            </div>
            <div class="card">
                <h3>Benefit 3</h3>
                <p>Description</p>
            </div>
        </section>

        <!-- 3 types of product -->
        <section class="products">
            <h2>Products</h2>
            <ul>
                <li>Product 1</li>
                <li>Product 2</li>
                <li>Product 3</li>
            </ul>
        </section>

        <!-- ID tracking -->
        <section class="id-tracking">
            <h2>ID Tracking</h2>
            <p>Description</p>
        </section>

        <!-- 3 dynamic testimonies -->
        <section class="testimonies">
            <h2>Testimonies</h2>
            <div class="owl-carousel owl-theme">
                <div class="testimony-1">Testimony 1</div>
                <div class="testimony-2">Testimony 2</div>
                <div class="testimony-3">Testimony 3</div>
            </div>
        </section>

        <!-- 4 dynamic slider of news -->
        <section class="news">
            <h2>News</h2>
            <div class="owl-carousel owl-theme">
                <div class="news-1">News 1</div>
                <div class="news-2">News 2</div>
                <div class="news-3">News 3</div>
                <div class="news-4">News 4</div>
            </div>
        </section>

        <!-- suggestion box -->
        <section class="suggestion-box">
            <h2>Suggestion Box</h2>
            <form action="#">
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name">
                </div>
                <div>
                    <label for="phone-number">Phone Number:</label>
                    <input type="text" id="phone-number" name="phone-number">
                </div>
                <div>
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email">
                </div>
                <button type="submit">Submit</button>
            </form>
        </section>

        <!-- static map to the office -->
        <section class="map">
            <h2>Map to the Office</h2>
            <img src="map.jpg" alt="Map to the Office">
        </section>
    </main>
    <script src="jquery.min.js"></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>
    <script>
        window.onscroll = function() {
            myFunction()
        };

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navbar.classList.add("sticky")
            } else {
                navbar.classList.remove("sticky");
            }
        }
    </script>

</body>

</html>

问题原因及解决方法 #

1. 脚本加载顺序错误 #

你的main.js（轮播初始化代码）在jQuery和Owl-Carousel脚本之前加载，导致初始化代码执行时依赖库还未加载，轮播无法正常初始化。
修复：
将<script src="main.js"></script>移动到</body>标签前，放在jQuery和Owl-Carousel脚本之后：

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
<script src="main.js"></script>
<script>
    window.onscroll = function() {
        myFunction()
    };
    // ... 其他滚动逻辑代码
</script>

2. 自定义CSS干扰轮播核心布局 #

给.owl-testmonial设置的position: unset和直接添加的背景样式，破坏了Owl-Carousel的布局逻辑，导致幻灯片无法正确隐藏。
修复：
修改.owl-testmonial的CSS，移除position: unset，并将背景样式转移到幻灯片项上：

.owl-testmonial {
    max-width: 400px;
    margin: 0 auto;
    /* 移除 position: unset 和 background: #FFF */
}

.slide-item {
    background: #FFF;
    padding: 40px 25px;
}

.owl-testmonial:before {
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    text-align: center;
    display: block;
    font-size: 92px;
    color: #e7e7e7;
    margin-top: -106px;
    position: relative;
    z-index: 1;
}

3. 幻灯片图片未限制宽度 #

图片宽度超出容器会撑开幻灯片，添加以下CSS确保图片自适应：

.slide-item img {
    width: 100%;
    height: auto;
    display: block;
}

内容的提问来源于stack exchange，提问作者zawkey