Splidejs 拖动选择索引

Question

状态：splidejs组件有24张幻灯片，只有3张幻灯片向用户显示，焦点：'center'

问题：用户拖动幻灯片后，（所选幻灯片的）属性索引仍然指示旧的不可见幻灯片。

问题：拖动后如何更改可见幻灯片（中心）的选定索引？

任何帮助将是适当的。

Answer 1

如果您使用普通 JS 方法

该线程应该为您提供所需的信息：https ://github.com/Splidejs/splide/issues/227

如果你使用的是Vue

我对上面线程中的解决方案做了一些更改。

该模板包括active和resize事件：

<Splide
    ref="slider"
    @splide:active="updateHeight"
    @splide:resize="updateHeight"
>...</Splide>

然后，添加一个currentSlideIndex并在组件安装时data触发事件：updateHeight

data() {
    return {
        currentSlideIndex: 0
    }
},
mounted() {
    this.updateHeight();
},

最后，包括updateHeight方法本身。currentSlideIndex仅当幻灯片发生更改（在活动期间）时，它才会获取数据并更新它active。由于幻灯片在组件安装和调整大小时不会更改，因此我们currentSlideIndex在本例中使用保存的值。之后，我们通过索引找到幻灯片，获取其高度并更新容器（即元素splide__list）的高度。

methods: {
    updateHeight(newSlide) {
        if (newSlide) {
            this.currentSlideIndex = newSlide.index
        }

        const slide = this.$refs.slider.splide.Components.Slides.getAt(this.currentSlideIndex).slide
        slide.parentElement.style.height = slide.offsetHeight + 'px'
    }
}

如果有人对如何改进此解决方案有建议，我很乐意对其进行相应更改。