5

State: splidejs component with 24 slides, only 3 slides appear to user, focus: 'center'

Problem: After user drag slides, property index (of selected slide) still indicates to old invisible slide.

Question: How change selected index of visible slide (in center) after drag?

Any help will be apricate.

unde08
  • 133
  • 1
  • 4

1 Answers1

0

If you're using vanilla JS approach

This thread should give you the required information: https://github.com/Splidejs/splide/issues/227

If you're using Vue

I've made a few changes to the solution in the thread above.

The template includes the active and resize events:

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

Then, add a currentSlideIndex to your data and fire the updateHeight event on component mount:

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

Finally, include the updateHeight method itself. It takes the currentSlideIndex from data and updates it only if the slide has been changed (during the active event). Since the slide doesn't change on component mount and on resize, we're using the saved currentSlideIndex value in this case. After that, we find the slide by index, get its height and update the height of the container (i.e. the splide__list element).

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

If anyone has suggestions on how to improve this solution, I'd be happy to change it accordingly.

Andrey B.
  • 31
  • 4