如何在移动设备上实现全宽度的旋转木马效果-PHP中文网问答

如何在移动手机或小屏幕设备上使我的轮播图变成全宽？任何帮助将不胜感激。

您可以查看下面的代码，或者直接在我的CodePen上查看 - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO

<div class="contain">
  <div id="owl-carousel" class="owl-carousel owl-theme">
    <div class="item">
              <img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
    </div>
    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
    </div>
    <div class="item">
      3
    </div>
    <div class="item">
      4
    </div>
    <div class="item">
      5
    </div>
    <div class="item">
      6
    </div>
  </div>
</div>

.contain {
  width: 100%;
}

.item {
 width:100%;
  color: white;
  display: block;
}

$('#owl-carousel').owlCarousel({
    loop: true,
    margin: 0,
    dots: true,
    nav: true,
    items: 2,
})