【发布时间】：2021-07-24 16:47:57
【问题描述】：
我想在本网站上的“浏览所有课程”按钮上方重新创建轮播https://www.bringyourownlaptop.com/
我想让这篇文章尽可能直截了当，但似乎 stackoverflow 迫使我输入更多内容，所以我会给你们更多细节。如果您想节省时间，请跳过阅读整个下一部分。
详情：
- 预期结果：
一行中的多张卡片，侧面带有“”控件，允许用户浏览卡片。在对 google 和 youtube 进行深入研究后，我发现了“owlcarousel”插件或任何似乎对我有用的东西。所以我尝试重新创建这个轮播：https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html，然后我会根据需要重新定位控件。
- 实际结果：
没有任何轮播，如果我添加更多卡片或更改显示尺寸，它们都会缩小以适合其容器（我尝试使用“flex-wrap”，但它不会改变任何东西）。
- 我尝试过的：
在 stackoverflow 和其他网站上从不同的类似问题中添加自动播放、autoplayTimeout 等...
我认为问题在于我如何/在何处导入 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>【问题讨论】：
-
确保在页面中包含
jQuery库，在 owl 脚本之前加载。 -
@prettyInPink 不是已经正确了吗？
标签： javascript html css twitter-bootstrap carousel