javascript - Flickity 没有隐藏在桌面上

Question

我希望 flickity 滑块隐藏在桌面和更大的设备上。我想我正在按照文档中的说明进行操作，它们看起来很简单，但是，它不起作用。

div 看起来像这样：

<div class="w-full flex pl-4 pb-16 overflow-x-auto lg:justify-center">
    <flickity class="main-carousel mx-20 mt-5 sm:my-10 w-10/12" ref="flickity" :options="{ lazyLoad: 3, watchCss: true, cellAlign: 'left', wrapAround: true, pageDots: true, pauseAutoPlayOnHover: true, arrowShape: { x0: 0, x1: 75, y1: 50, x2: 90, y2: 50, x3: 15 } }">
        <PlanesCard v-for="(plan, index) in getTiers" :key="index" :value="plan.value" :name="plan.name" />
    </flickity>
</div>

像这样的造型：

    .main-carousel:after {
        content: 'flickity';
        display: none;
    }

    @media (min-width: 1024px) {
        .main-carousel:after {
            content: '';
        }
    }

这是被“轻弹”的组件，看起来像这样，即使我认为这并不重要：

<article :class="planText()" class="py-8 flex-shrink-0">
    <h2>
        <span>{{ value }}</span>
    </h2>
    <ul class="text-left pl-6 pr-4">
        <PlanList v-for="pl in getFeatures" :key="pl.title" :plan="name" />
    </ul>
</article>

另外，我不知道这是否重要，但是当我检查 Chrome 上的元素时，我有这个：

提前致谢！

标签： javascriptcssvue.jsflickityvue-flickity

Answer 1

我想你拼错了一个属性。我重现了您的问题并通过将属性“watchCss”更改为“watchCSS”来修复它。