Owl-轮播不工作！初学者网络开发人员

Question

我想重新创建这个网站上“浏览所有课程”按钮正上方的旋转木马https://www.bringyourownlaptop.com/

我想让这个 post 尽可能直截了当，但似乎 Whosebug 迫使我输入更多内容，所以我会给出你们更多的细节。如果您想节省时间，请跳过阅读整个下一节。

详情：

预期结果：

多张卡片排成一排，旁边有“<”和“>”控件，允许用户在卡片中导航。在对 google 和 youtube 进行深入研究后，我找到了“owlcarousel”插件或任何对我有用的插件。所以我尝试重新创建这个旋转木马：https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html 之后我会根据需要重新定位控件。

实际结果：

没有任何旋转木马，如果我添加更多卡片或更改显示尺寸，它们都会缩小以适合它们的容器（我试过使用“flex-wrap”但它没有改变任何东西）。

我尝试过的：

添加自动播放、自动播放超时等...来自 Whosebug 和其他网站上的不同类似问题...

我认为问题出在 how/where 我导入了 css、js 等，但我已经尝试将它放在页眉、页脚等所有内容上，但它不起作用。

这是我的全部代码：

* {
    padding: 0;
    margin: 0;
}

.wrapper-grid {
    display: grid;
    height: 100%;
    place-items: center;
    text-align: center;
    background: #272727;
}

.slider {
    /* max-width: 1000px; */
    /* overflow: hidden; */
}

.card {
    border-color: #272727;
    flex: 1;
}

.card-img-top {
    height: 200px;
    width: 100%;
    background: #471A69;
}

.card-img-top img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.card-body {
    background: #7A2DB5;
}

.card-body p {
    text-align: justify;
}

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <link rel="stylesheet" href="carousel.css">
    <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
    <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

    <title>Hello, world!</title>
</head>

<body>

    <div class="wrapper-grid">
        <div class="slider d-flex owl-carousel">
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-adobe.svg" class="card-img-top py-3 px-3" alt="Adobe">
                <div class="card-body">
                    <h5 class="card-title">Suite Adobe</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-bootstrap.svg" class="card-img-top py-3 px-3" alt="Bootsrap">
                <div class="card-body">
                    <h5 class="card-title">Bootstrap</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-php.svg" class="card-img-top py-3 px-3" alt="PHP">
                <div class="card-body">
                    <h5 class="card-title">PHP</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-python.svg" class="card-img-top py-3 px-3" alt="Python">
                <div class="card-body">
                    <h5 class="card-title">Python</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-wordpress.svg" class="card-img-top py-3 px-3" alt="Wordpress">
                <div class="card-body">
                    <h5 class="card-title">Wordpress</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon ionic-logo-javascript.svg" class="card-img-top py-3 px-3" alt="Javascript">
                <div class="card-body">
                    <h5 class="card-title">Javascript</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
    </script>
    <script src="jquery.min.js"></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>

    <script>
        var owl = $('.owl-carousel');    
        $(document).ready(function () {
            owl.owlCarousel({
                items: 3,
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 1000,
                autoplayHoverPause: true
            });
            $('.play').on('click', function () {
                owl.trigger('play.owl.autoplay', [1000])
            })
            $('.stop').on('click', function () {
                owl.trigger('stop.owl.autoplay')
            })
        });
    </script>


</body>

</html>

Answer 1

似乎对我有用。您确定您正在正确加载 jquery 吗？您是否在控制台中看到错误？

* {
    padding: 0;
    margin: 0;
}

.wrapper-grid {
    display: grid;
    height: 100%;
    place-items: center;
    text-align: center;
    background: #272727;
}

.slider {
    /* max-width: 1000px; */
    /* overflow: hidden; */
}

.card {
    border-color: #272727;
    flex: 1;
}

.card-img-top {
    height: 200px;
    width: 100%;
    background: #471A69;
}

.card-img-top img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.card-body {
    background: #7A2DB5;
}

.card-body p {
    text-align: justify;
}

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

    <title>Hello, world!</title>
</head>

<body>

    <div class="wrapper-grid">
        <div class="slider d-flex owl-carousel">
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-adobe.svg" class="card-img-top py-3 px-3" alt="Adobe">
                <div class="card-body">
                    <h5 class="card-title">Suite Adobe</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-bootstrap.svg" class="card-img-top py-3 px-3" alt="Bootsrap">
                <div class="card-body">
                    <h5 class="card-title">Bootstrap</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-php.svg" class="card-img-top py-3 px-3" alt="PHP">
                <div class="card-body">
                    <h5 class="card-title">PHP</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-python.svg" class="card-img-top py-3 px-3" alt="Python">
                <div class="card-body">
                    <h5 class="card-title">Python</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon awesome-wordpress.svg" class="card-img-top py-3 px-3" alt="Wordpress">
                <div class="card-body">
                    <h5 class="card-title">Wordpress</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
            <div class="card mx-2">
                <img src="./Exports_iOS/Icon ionic-logo-javascript.svg" class="card-img-top py-3 px-3" alt="Javascript">
                <div class="card-body">
                    <h5 class="card-title">Javascript</h5>
                    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                        Aliquid, iusto. Quas
                        corporis animi voluptas facilis minus? Laudantium veritatis debitis tenetur.
                    </p>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

    <script>
           
        $(document).ready(function () {
            var owl = $('.owl-carousel'); 
            owl.owlCarousel({
                items: 3,
                loop: true,
                margin: 10,
                autoplay: true,
                autoplayTimeout: 1000,
                autoplayHoverPause: true
            });
            $('.play').on('click', function () {
                owl.trigger('play.owl.autoplay', [1000])
            })
            $('.stop').on('click', function () {
                owl.trigger('stop.owl.autoplay')
            })
        });
    </script>


</body>

</html>

Owl-轮播不工作！初学者网络开发人员

Owl-Carousel not working! Beginner web developer

html

javascript

css

carousel

twitter-bootstrap