owl-carousel在移動設備上不起作用-有解無憂

在桌面版本中，它作業正常，然后移動設備顯示與桌面相同數量的專案。

 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
    nav:false,
    responsiveClass:true,
    autoplay:true,
    autoplayTimeout:2500,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
})

uj5u.com熱心網友回復：

以防萬一，也許您沒有包含回應式元標記：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

您添加的代碼似乎可以正常作業，也許是某些 css 以某種方式覆寫了它？

 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
    nav:false,
    responsiveClass:true,
    autoplay:true,
    autoplayTimeout:2500,
    responsive:{
        0:{
            items:1,
        },
        600:{
            items:2
        },
        1000:{
            items:4
        }
    }
});

.owl-carousel {
    margin: 2rem 0;
}

.owl-carousel .item {
    height: 10rem;
    background: #4DC7A0;
    padding: 1rem;
}

.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo  nk7go3BtSuK9kfa/s a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="owl-carousel owl-theme">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361825.html

標籤：javascript 查询

上一篇：當用戶單擊標簽時添加單擊按鈕僅在我單擊兩次時才起作用

下一篇：LaravelDI值為空