Question

我有以下html：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.settings.android.elisea">

    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"></uses-permission>
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".AddContact"></activity>

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_place_api"></meta-data>

    </application>


</manifest>

我希望Owl Carousel只能在手机上使用。我试过这个，但它没有工作：

<div class="experience-items">
   <div class="experience-item">Lorem</div>
   <div class="experience-item">Lorem</div>
   <div class="experience-item">Lorem</div>
</div>

我觉得this最接近我想达到的目标，但OP使用了enquire.js，我不想这样做。

我找到了一个我想要实现的例子here，但我不了解它背后的javascript。

更新我找到了完美的例子here。如果其他人需要看到这个，我就不会关闭这个主题。我不确定是否需要javascript的数量，但我必须将其全部和var checkWidth = $(window).width(); if (checkWidth > 699) { $('.experience-items').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded'); $('.experience-items').find('.owl-stage-outer').children().unwrap(); } else if (checkWidth < 700) { $carousel.owlCarousel(); owl.on('initialized.owl.carousel', function(e) {}); }类包含在内才能使其正常工作。

Answer 1

这可以通过CSS媒体查询来完成。

@media only screen and (min-width: 736px) {
  .experience-items{display:none;}
}

注意：我们只是使用CSS来隐藏owl carousal。

Answer 2

＆＃13;

.experience-items{
  display:block;
}
    
@media screen and (max-width:360px){
  .experience-items{
    display:block;
    }
}

＆＃13;

您必须将此css插入现有的CSS

如何使Owl Carousel仅在移动设备上运行

2 个答案: