Как сделать, чтобы слайдер Owl Carusel выглядел следующим образом

#javascript #html #css

#javascript #HTML #css

Вопрос:

Как сделать, чтобы моя карусель выглядела как этот слайдер на картинке. Центральное изображение перекрывает два других изображения. введите описание изображения здесь

Комментарии:

1. По крайней мере, попробуйте поместить часть вашего кода

2. используйте с Z-index amp; position в css, вы получите перекрывающийся дизайн.

3. @Bandi взгляните, теперь я опубликовал код

4. @prasad Какую позицию мне следует использовать?

Ответ №1:

 $('.owl-carousel').owlCarousel({
stagePadding: 10,
loop:true,
margin:0,
nav:true,
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:1
    },

    1200:{
      items:1
    }
}
})
  

и это html-код

 <div class="owl-carousel">
      <div class="item"><img src="img/slider1.png" alt="" /></div>
      <div class="item"><img src="img/slider1.png" alt="" /></div>
      <div class="item"><img src="img/slider1.png" alt="" /></div>
  </div>