I can't seem to get my owl carousel properly centered on my website. I've set up the owl carousel to showcase customer testimonials on my landing page, but it's slightly off to the right and not aligning correctly with the testimonial title. Despite trying different solutions like adjusting the width of the carousel, checking for HTML errors, and even rewriting the JS code, nothing seems to fix the issue. Anyone have any insight into what might be causing this problem and how to center the owl carousel correctly?
Here's the code snippet:
.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;
} $(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});<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>