1

I want it to display 6 articles like this, and then be able to slide to the next frame with another 6 articles: view img

When I use this code, it only shows 3 articles per frame:

$('.owl-carousel').owlCarousel({
loop:false,
margin:10,

}

view img

When I use "responsive", it shows 6 articles but all in horizontal:

$('.owl-carousel').owlCarousel({
loop:false,
margin:10,
responsive:{
    1000:{
        items:6
    },
}

view img

How can I display 3 articles on top, and 3 articles on the bottom?

Raju Ahmed
  • 1,282
  • 5
  • 15
  • 24
Christian Lee
  • 11
  • 2
  • there are many solutions - it's just simple CSS for owl-item – Wordica Sep 29 '22 at 06:13
  • Duplicate one here with answer [https://stackoverflow.com/questions/60429910/owl-carousel-multiple-rows](https://stackoverflow.com/questions/60429910/owl-carousel-multiple-rows) – Dakshank Sep 29 '22 at 06:20
  • Does this answer your question? [Owl carousel multiple rows](https://stackoverflow.com/questions/60429910/owl-carousel-multiple-rows) – SaschaM78 Sep 29 '22 at 07:35

1 Answers1

0

you should be use the full responsive codes for all of screen resolution

example

responsive:{
1000:{items:5,loop:true},
900:{items:4,loop:true},
800:{items:4,loop:true},
600:{items:3,loop:true},
500:{items:3,loop:true},
1:{items:2,loop:true}
},

You should also check the CSS style codes to be accurate Insert the link for better review so others can help better

According to your image, the problem is that the CSS is not set correctly

Faz2Music.ir
  • 35
  • 7