So implementieren Sie einen Karusselleffekt in voller Breite auf Mobilgeräten
P粉302484366
2023-08-31 09:17:45
<p>Wie kann ich mein Karussell auf einem Mobiltelefon oder einem Gerät mit kleinem Bildschirm in voller Breite anzeigen?
Jede Hilfe wäre sehr dankbar. </p>
<p>Sie können sich den Code unten oder direkt auf meinem CodePen ansehen – 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_45WF64GI7Y5ldi6eZQ. STZ5 twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_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></pre>
<pre class="brush:php;toolbar:false;">.contain {
Breite: 100 %;
}
.Artikel {
Breite: 100 %;
Farbe weiß;
Bildschirmsperre;
}</pre>
<pre class="brush:php;toolbar:false;">$('#owl-carousel').owlCarousel({
Schleife: wahr,
Rand: 0,
Punkte: wahr,
nav: wahr,
Artikel: 2,
})</pre></p>
希望它对你有用！！！
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>