文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >猫头鹰-旋转木马坏了！初学者web开发人员

问猫头鹰-旋转木马坏了！初学者web开发人员
EN

Stack Overflow用户
提问于 2021-05-01 17:40:43
回答 1查看 80关注 0票数 0

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

我想让这篇文章尽可能的直截了当，但是看起来堆栈溢出迫使我输入更多的东西，所以我会给你们提供更多的细节。如果您想节省时间，只需跳过整个下一节.。

详细信息：

  1. 预期结果：

一行上有"<“和">”控件的多张卡，允许用户在卡片中导航。在对谷歌和youtube进行了深入的研究之后，我发现了“猫头鹰”插件或任何似乎适合我的插件。因此，我尝试重新创建这个旋转木马：https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html和我将重新定位控件后，我想。

  1. 实际结果：

没有任何旋转木马，如果我增加更多的卡或改变显示大小，他们都缩小，以适应他们的容器(我试过使用“弹性包装”，但它没有改变任何东西)。

我尝试过的东西：

  1. ：

添加自动播放，autoplayTimeout等.在堆叠溢出和其他网站上有不同的相似问题。

我相信问题在于我是如何/在哪里导入css、js等的，但是我尝试过将它放在头部、页脚、所有东西上，而且它不起作用。

这是我的全部代码：

​

代码语言：javascript
复制
* {
    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;
}
代码语言：javascript
复制
<!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>

​

javascript
html
css
twitter-bootstrap
carousel
EN

Stack Overflow用户

回答已采纳

发布于 2021-05-01 20:54:32

似乎在为我工作。是否确实正确地加载了jquery？您在控制台中看到错误了吗？

​

代码语言：javascript
复制
* {
    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;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67349190

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档