如何在行動裝置上實現全寬度的旋轉木馬效果
P粉302484366
P粉302484366 2023-08-31 09:17:45
0
1
435
<p>如何在行動手機或小螢幕裝置上讓我的輪播圖變成全寬? 任何幫助將不勝感激。 </p> <p>您可以查看下面的程式碼,或直接在我的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-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxGIM564764676pFpJpFpppppJtM 月3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" /> </div> <div class="item"> <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uRYptJYp2ujRiVX6_6hNA-mCkh9OmJI5uRYoJYp2ujRiVX6_6hNA-mCkh9 2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responNnJ4J=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粉302484366
P粉302484366

全部回覆(1)
P粉170438285

希望它對你有用! ! !

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;
}


  
    
    
    
    Dashboard
    
      
      
    

    
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!