$('.slider').owlCarousel({
nav: false,
dots: false,
loop: true,
items: 3,
responsive: {
0: {
items: 1,
stagePadding: 230,
margin: 10,
}
}
})
.slider {
width: 400px;
display: flex;
justify-content: center;
}
.slider_item {
width: 100px;
height: 120px;
}
.slider_item {
background: red;
}
.slider .owl-item.active .slider_item {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="slider owl-carousel">
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
<div class="slider_item"></div>
</div>
Что я делаю не так? Мне нужно что бы мои элементы были вплотную друг к другу ,а активный элемент должен быть по центру.