Currently, I am attempting to center a small image within the owl carousel. While I have managed to center it when it's active and in the center, I'm encountering issues when the item no longer carries the "center" class.
You can access Owlcarousel via this link: https://github.com/OwlCarousel2/OwlCarousel2/releases
Classes: Center and active https://i.sstatic.net/bf45p.png
Classes: active https://i.sstatic.net/n12vY.png
Desired appearance https://i.sstatic.net/ytHmY.png
This is a screenshot of the HTML on the website (F12)
My HTML Code:
<section class="wrapper_bewertungen">
<div class="bewertungen_wrap">
<h2>Das sagen unsere Kunden</h2>
<div id="testimonial-slider" class="owl-carousel">
[...] //Note: Truncated for brevity
</div>
</div>
</section>
My SCSS Code:
.owl-carousel {
.owl-item {
img {
height: 80px;
width: auto !important;
[...]
}
}
}
.wrapper_bewertungen {
height: 400px;
h2 {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 30px;
}
[. . .] //Note: More CSS code truncated here
}
Settings for the owl carousel:
$("#testimonial-slider").owlCarousel({
items: 1,
loop: true,
autoplay: false,
dots: false,
center: true,
responsiveClass: true,
responsive: {
[...]
},
});