Как исправить навигацию и точки для слайдера, приведенные в дизайне

Question

Я создаю ползунок, в котором я пытаюсь центрировать активную точку между навигационной панелью совы ... Пожалуйста, помогите мне в этом

это ссылка дизайна https://lh3.googleusercontent.com/-q9eozmWynzc/XUfFk-qpMRI/AAAAAAAAS74/PUoAw3bshYYfiNl3k71mdVnzfs62Sp7igCK8BGAs/s0/2019-08-04.png

<div id="slider-area" class="owl-carousel owl-theme">
   <div class="item">
    <img src="img/bg.jpg" alt="images">
   </div>
   <div class="item">
    <img src="img/bg2.jpg" alt="images">
   </div>
   <div class="item">
     <img src="img/bg.jpg" alt="images">
   </div>
</div>
$('#slider-area').owlCarousel({
  loop:true,
  autoplay:true,
  dots:true,
  nav:true,
  items:1
 })

Answer 1

Здесь вы можете использовать центральную опору, чтобы сделать карусель в центр.

$('#slider-area').owlCarousel({
   center: true,
   loop:true,
   autoplay:true,
   dots:true,
   nav:true,
   items:1
});

Надеюсь, это поможет.