滑动转盘:是否可以在没有中心的情况下将转盘项目滚动到中心模式:true

Question

使用滑动转盘-是否可以在不使用centerMode: true的情况下将转盘项目滚动到中心(例如，使用选项focusOnSelect(？

我问的原因是，使用以下配置：

{
focusOnSelect: true,
centerMode: true,
infinite: true,
variableWidth: true
}

特别是——我认为——对于variableWidth: true，我最终得到了一个两边都有溢出的初始幻灯片布局。我最初希望左侧没有溢出，因为这将符合从屏幕中心开始并一直延伸到屏幕右侧的设计。

简单地说，当你点击一张幻灯片时，它应该集中在中间，而不是左边(在我看来，从用户体验的角度来看，这似乎很令人困惑(，而不是强迫幻灯片开始居中。

Answer 1

假设您有一个带有VueSlickCarousel的组件模板，例如

<template>
<VueSlickCarousel v-bind="settings" ref="carousel" @reInit="onCarouselReInit">
...your slides...
</VueSlickCarousel>
</template>

您的数据可能有一个带有focusOnSelect: true的settings对象。

您可以设置以下reInit处理程序方法，以保持事物居中，而不使初始渲染居中：

methods: {
/**
* Center the carousel slide without having the carousel be in centerMode
* on initial render.
*/
onCarouselReInit () {
this.carouselInitiated = true
// Set centerMode without triggering a re-render.
this.$refs.carousel.$refs.innerSlider.$data.centerMode = true
},

这是因为VueSlickCarousel会自动监视您的配置道具并重新渲染，所以您不能以这种方式动态设置centerMode。相反，您可以更深入地挖掘内部InnerSlider组件，并在那里设置属性。