Vuetify v-slide-group鼠标水平滚动

Question

我想去掉我的v-slide-group上的箭头，并能够使用桌面上的鼠标滚轮滚动它，目前只能在移动视口上滚动。

这可能吗？

我的模板：

<v-layout justify-center>
<div style="width: 600px; background-color: red">
<v-slide-group center-active active-class="success">
<v-slide-item v-slot:default="{ active, toggle }"
v-for="(item, idx) in 25"
:key="idx"
>
<v-card
@click="toggle"
class="mx-2 rounded-lg"
width="250"
height="175"
:ripple="{ class: 'rounded-lg' }"
:color="active ? undefined : 'grey lighten-1'"
/>
</v-slide-item>
</v-slide-group>
</div>
</v-layout>

css

.v-slide-group__next {
display: none;
}
.v-slide-group__prev {
display: none;
}

还有一个代码笔：

https://codepen.io/willcolmenares/pen/qBNWRKY

Answer 1

我想明白了，但我不确定这是否是最好的方法(打断我真正喜欢的中心活动动画(。

.v-slide-group__wrapper {
overflow-x: auto; /* Enables the horizontal scrollbar */
/* Next lines hides scrollbar in different browsers for styling purposes */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.v-slide-group__wrapper::-webkit-scrollbar {
display: none; /* Chrome opera and Safary */
width: 0px;
background: transparent;
}