Slick Carousel: is it possible to scroll the carousel item into the center without centerMode: true?

Question

With Slick Carousel - is it possible to scroll the carousel item into the center (e.g. with option focusOnSelect) without using centerMode: true?

The reason I ask is that with the following configuration:

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

Particularly - I think - with variableWidth: true, I end up with an initial slide layout that has overflows on both sides. I want to have no overflow on the left side initially, as this would conform to the design that begins in the center of the screen and stretches until the right side of the screen.

Simply put, when you click on a slide, it should focus in the center, rather than on the left (which seems confusing from a UX-perspective in my opinion), without forcing the slides to begin centered.

Answer 1

Assuming you have a component template with VueSlickCarousel e.g.

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

Your data may have a settings object with focusOnSelect: true.

You can set up the following reInit handler method to keep things centered without having the initial render centered:

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

This works because VueSlickCarousel watches your configuration props and re-renders automatically, so you can't dynamically set centerMode this way. Instead, you dig deeper to the inner InnerSlider component and set the property there.