Splidejs 拖动选择索引

Question

状态： 带有 24 张幻灯片的 splidejs 组件， 只有 3 张幻灯片显示给用户， 焦点：“中心”

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

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

任何帮助都是适当的。

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'
    }
}

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