I am trying to hide the flickity slider on desktop and larger devices. I have followed the instructions in the documentation, but for some reason, it's not working as expected.
Here is how the div looks:
<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>
Here is the styling:
.main-carousel:after {
content: 'flickity';
display: none;
}
@media (min-width: 1024px) {
.main-carousel:after {
content: '';
}
}
The component that is being "flicked" looks like this:
<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>
I also noticed something when inspecting the element on Chrome:
https://i.stack.imgur.com/IJdmo.png
Any help would be appreciated!