英文:
Owl Carousel card not centered
问题
我在我的网站上遇到了一个问题，无法使我的猫头鹰走马灯居中显示。我已经实现了猫头鹰走马灯，用于在我的落地页上显示客户的推荐。然而，走马灯似乎稍微偏向右侧，并且与推荐标题不对齐。我尝试了各种解决方案，如调整走马灯的宽度，仔细检查HTML是否有任何错误，甚至重写JS，但这些解决方案似乎都不起作用。有人能帮我找出是什么原因导致了这个问题，以及如何在我的网站上正确居中猫头鹰走马灯吗？
英文:
I am having trouble getting my owl carousel to be centered on my website. I have implemented the owl carousel to display testimonials from customers on my landing page. However, the carousel seems to be slightly off to the right and not straight with the testimonial title. I have tried various solutions, such as adjusting the width of the carousel, double checking the HTML for any errors, and even rewriting the JS, but none of these solutions seem to work. Can anyone help me figure out what's causing this issue and how to properly center the owl carousel on my website?
this is my code :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
.owl-item.center .testimonial-card {
transform: scale(0.8);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}
.testimonial-card {
width: 500px;
padding: 20px;
display: flex;
flex-direction: row;
border-radius: 20px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
align-content: space-evenly;
justify-content: center;
transform: scale(0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.testimonial-content {
display: flex;
flex-direction: column;
}
.testi-img {
width: 100%;
height: 100%;
position: relative;
}
.testi-title {
background-color: #FFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
text-align: center;
border-radius: 40px;
margin-top: 30px;
padding: 30px;
width: 40%;
margin-inline: auto;
font-weight: bold;
}
<!-- language: lang-css -->
$(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});
<!-- language: lang-html -->
<div class="testi-title"> Testimonial</div>
<section class="owl-carousel owl-testimonials">
<div class="testimonial-card">
<img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
</section>
<!-- end snippet -->
答案1
得分: 0
这个问题是因为您在 .testimonial-card 类上声明了固定宽度。如果您将 width:500px 更新为 100%，它将修复这个问题。您还可以检查这个代码片段来获取解决方案。
.testimonial-card {
width: 100%;
/* 其他样式 */
}
请点击以下链接查看解决方案：https://codepen.io/salmanaabir/pen/vYawZYb
英文:
This issue was created because you decleared fixed width on .testimonial-card class. If you update the width:500px to 100% it will fix the issue.
You can check the pen also to get the solution.
https://codepen.io/salmanaabir/pen/vYawZYb
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$( document ).ready(function() {
$(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});
});
<!-- language: lang-css -->
.owl-item.center .testimonial-card {
transform: scale(0.8);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}
.testimonial-card {
width: 100%;
padding: 20px;
display: flex;
flex-direction: row;
border-radius: 20px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
align-content: space-evenly;
justify-content: center;
transform: scale(0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.testimonial-content {
display: flex;
flex-direction: column;
}
.testi-img {
width: 100%;
height: 100%;
position: relative;
}
.testi-title {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
text-align: center;
border-radius: 40px;
margin-top: 30px;
padding: 30px;
width: 40%;
margin-inline: auto;
font-weight: bold;
}
<!-- language: lang-html -->
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' />
<div class="testi-title"> Testimonial</div>
<section class="owl-carousel owl-testimonials">
<div class="testimonial-card">
<img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 1">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 2">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 3">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论