1

I am using OwlCarousel 2.3.4 and I have the carousel working but it seems to be ignoring the coverproperty set in my CSS so it is displaying all images side by side rather than as a cover.

I have created a CodePen with my code (I have removed most of the content to keep it small but the Owl Carousel issue is still there) - CodePen

Luke
  • 603
  • 2
  • 11
  • 35

1 Answers1

1

Initially, owl carousel shows 3 items. If you want to customize the item, you can just add an item property where you have initialized the carousel.

something like this one example--

` $(document).ready(function(){
  $(".owl-carousel").owlCarousel({
    loop: true,
    autoplay: true,
    items: 1
  });
});`
Nayeem M. Muzahid
  • 141
  • 6
  • I've updated the `ìtems` property but it still shows them side by side rather than cover (I've updated the CodePen) – Luke Jun 03 '22 at 09:35
  • .slide-1 { background: url('https://via.placeholder.com/1024') no-repeat center cover; } try doing this. – Nayeem M. Muzahid Jun 03 '22 at 09:51
  • No, that just makes them disappear, and `.slide-1 { background: url('via.placeholder.com/1024') no-repeat center/cover; } `has no effect – Luke Jun 03 '22 at 10:02
  • I was being totally stupid, I set ìtems: 1`and it worked, I had it set to 3 – Luke Jun 03 '22 at 10:05