英文:
Owl-Carousel Slideshow on Website not appear as single item
问题
我一直在尝试通过将Js设置为Items,循环或其他方式来修复此错误,还尝试编辑CSS中的容器或滑块项,但似乎都不起作用。最终,它显示出所有列表而不是逐个显示。因此,结果是,它把网站拉长了。
这是我的代码:
$(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
});
});
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;
}
/* 其他CSS样式... */
.owl-carousel.owl-testmonial {
/* 添加或修改其他样式 */
}
<!-- HTML中的结构保持不变 -->
注意:在提供的代码片段中,Js和CSS部分没有明显的错误。如果问题仍然存在,请检查其他可能影响轮播功能的部分,例如HTML结构或其他JavaScript代码。
英文:
I've been trying to fix this error by setting the Js up like the Items, the loops or else and also i try to edit the container in the CSS or even the slider-items but all seems not working out. since it's ended up showing all the list instead one by one. So, as the result, it stretched the website up.
here's my code :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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
});
});
<!-- language: lang-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%;
}
}
<!-- language: lang-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>
<!-- end snippet -->
答案1
得分: 2
使用经过验证的故障排除技巧来隔离问题。保存你的代码。然后删除与走马灯无关的所有内容,看看它是否有效。它有效!(运行下面的片段)。现在逐段添加回你的代码,直到它停止工作,然后你就知道问题出在哪里。
$(document).ready(function() {
//for testimonial
var owl = $('.owl-testimonial');
owl.owlCarousel({
items: 1,
loop: true,
nav: true,
margin: 10,
autoplay: true,
autoplayTimeout: 2500,
autoplayHoverPause: true
});
});
body {
font-family: Arial, sans-serif;
margin: 0;
}
.owl-testimonial {
background: #FFF;
max-width: 400px;
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testimonial .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-testimonial .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;
}
<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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.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-testimonial">
<div class="slide-item">
<img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg" alt="Slide 1">
</div>
<div class="slide-item">
<img src="https://llandscapes-10674.kxcdn.com/wp-content/uploads/2019/07/lighting.jpg" alt="Slide 2">
</div>
<div class="slide-item">
<img src="https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg" alt="Slide 3">
</div>
</div>
</body>
这些是你提供的代码的翻译部分。
英文:
Use the tried and true troubleshooting technique for isolating a problem. Save your code. Then remove everything unrelated to the carousel and see if it works. It does! (run the snippet below). Now add back your code in sections until it stops working, then you’ll know where the problem is.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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
});
});
<!-- language: lang-css -->
body {
font-family: Arial, sans-serif;
margin: 0;
}
.owl-testmonial {
background: #FFF;
max-width: 400px;
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.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;
}
<!-- language: lang-html -->
<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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.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-testmonial">
<div class="slide-item">
<img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg" alt="Slide 1">
</div>
<div class="slide-item">
<img src="https://llandscapes-10674.kxcdn.com/wp-content/uploads/2019/07/lighting.jpg" alt="Slide 2">
</div>
<div class="slide-item">
<img src="https://img.freepik.com/free-vector/nature-scene-with-river-hills-forest-mountain-landscape-flat-cartoon-style-illustration_1150-37326.jpg" alt="Slide 3">
</div>
</div>
</body>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论