Maison  >  Questions et réponses  >  le corps du texte

Comment implémenter un effet carrousel pleine largeur sur les appareils mobiles

<p>Comment puis-je afficher mon carrousel en pleine largeur sur un téléphone mobile ou un appareil à petit écran ? Toute aide serait grandement appréciée. </p> <p>Vous pouvez consulter le code ci-dessous, ou directement sur mon CodePen - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO</p> <pre class="brush:php;toolbar:false;"><div class="contain"> <div id="hibou-carrousel" class="hibou-carrousel thème-hibou"> <div class="élément"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQ 5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" classe = "img-responsive" /> </div> <div class="élément"> <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="élément"> 3 </div> <div class="élément"> 4 </div> <div class="élément"> 5 </div> <div class="élément"> 6 </div> </div> </div></pre> <pre class="brush:php;toolbar:false;">.contain { largeur : 100 % ; } .article { largeur : 100 % ; Couleur blanche; bloc de visualisation; }</pré> <pre class="brush:php;toolbar:false;">$('#owl-carousel').owlCarousel({ boucle : vrai, marge : 0, points : vrai, navigation : vrai, articles: 2, })</pre></p>
P粉302484366P粉302484366436 Il y a quelques jours697

répondre à tous(1)je répondrai

  • P粉170438285

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

    J'espère que cela vous sera utile ! ! !

    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>

    répondre
    0
  • Annulerrépondre