How do I make my carousel full width on a mobile phone or small screen device? Any help would be greatly appreciated.
You can check out the code below, or directly on my CodePen - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO
3456
.contain { width: 100%; } .item { width:100%; color: white; display: block; } $('#owl-carousel').owlCarousel({ loop: true, margin: 0, dots: true, nav: true, items: 2, })
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Hope it's useful to you! ! !
jQuery(document).ready(function(){ jQuery('#owl-carousel').owlCarousel({ loop: true, margin: 0, dots: true, nav: true, items: 2, responsiveClass:true, responsive:{ 1000:{ items:2, nav:true, loop:true }, 600:{ items:1, nav:true, loop:true }, 0:{ items:1, nav:true, loop:true } } }); });.contain { width: 100%; } .item { width:100%; color: white; background-color: salmon; display: block; }