英文:
Owl Carousel display issue
问题
我尝试将图片放在一个水平轮播中，但每当我尝试时，它显示得很奇怪，就像是垂直的。以下是我的代码片段：
<div class="owl-carousel owl-theme">
<div class="item">
<a href="link">
<img class="gameimg" src="default-placeholder.png" />
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
responsive: {
0: {
items: 1,
},
700: {
items: 6,
},
1000: {
items: 9,
},
},
});
</script>
我尝试更改高度，希望这可能会解决问题，但它什么都没做，只是调整了容器的大小。
英文:
I am trying to make pictures be in a carousel horizontally, however whenever I try, it displays it weird like it is vertical. Here is a snippet of my code
<div class="owl-carousel owl-theme">
<div class="item">
<a href="link">
<img class="gameimg" src="default-placeholder.png" />
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
responsive: {
0: {
items: 1,
},
700: {
items: 6,
},
1000: {
items: 9,
},
},
});
</script>
I attempted to try to change the height, hoping that would maybe solve it however it didn't do anything but resize the container it was in.
答案1
得分: 1
问题在于您没有在HTML中包含Owl Carousel的样式表，您可以在它们的文档中查看安装指南：
在添加这些样式表之后，以下是有效的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>您的标题</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"
/>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<!-- 其他幻灯片项目 -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
responsive: {
0: {
items: 1,
},
700: {
items: 6,
},
1000: {
items: 9,
},
},
});
</script>
</body>
</html>
英文:
The problem is that you're not including Owl Carousel's stylesheets in your HTML, you can see the installation guide on their docs:
Here is the working code after adding these stylesheets:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>🦉</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"
/>
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
<div class="item">
<a href="link">
<img class="gameimg" src="https://via.placeholder.com/200" />
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
responsive: {
0: {
items: 1,
},
700: {
items: 6,
},
1000: {
items: 9,
},
},
});
</script>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论