search

Home  >  Q&A  >  body text

How to implement a full-width carousel effect on mobile devices

<p>How do I make my carousel full width on a mobile phone or small screen device? Any help would be greatly appreciated. </p> <p>You can check out the code below, or directly on my CodePen - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO</p> <pre class="brush:php;toolbar:false;"><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_45WF64GI7Y5ldi6eZQSTZ 5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" /> </div> <div class="item"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_p BQs2-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></pre> <pre class="brush:php;toolbar:false;">.contain { width: 100%; } .item { width:100%; color: white; display: block; }</pre> <pre class="brush:php;toolbar:false;">$('#owl-carousel').owlCarousel({ loop: true, margin: 0, dots: true, nav: true, items: 2, })</pre></p>
P粉302484366P粉302484366455 days ago716

reply all(1)I'll reply

  • P粉170438285

    P粉1704382852023-09-01 00:16:01

    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;
}
    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard</title>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />  
      
    

    </head>
    <body>

    <div class="contain">
      <div id="owl-carousel" class="owl-carousel">
        <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>
    </div>



    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
   
    </body>
</html>

    reply
    0
  • Cancelreply