Con Slick Carousel , ¿es posible desplazar el elemento del carrusel hacia el centro (por ejemplo, con la opción focusOnSelect ) sin usar centerMode: true ?
La razón por la que pregunto es que con la siguiente configuración:
{ focusOnSelect: true, centerMode: true, infinite: true, variableWidth: true } Particularmente, creo, con variableWidth: true , termino con un diseño de diapositiva inicial que tiene desbordamientos en ambos lados. Inicialmente, no quiero tener desbordamiento en el lado izquierdo, ya que esto se ajustaría al diseño que comienza en el centro de la pantalla y se extiende hasta el lado derecho de la pantalla.
En pocas palabras, cuando hace clic en una diapositiva, debe enfocarse en el centro, en lugar de a la izquierda (lo que parece confuso desde una perspectiva de UX en mi opinión), sin forzar que las diapositivas comiencen centradas.
Suponiendo que tiene una plantilla de componente con VueSlickCarousel, por ejemplo
<template> <VueSlickCarousel v-bind="settings" ref="carousel" @reInit="onCarouselReInit"> ...your slides... </VueSlickCarousel> </template> Sus datos pueden tener un objeto de settings con focusOnSelect: true .
Puede configurar el siguiente método del controlador reInit para mantener las cosas centradas sin tener centrado el renderizado inicial:
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 }, Esto funciona porque VueSlickCarousel observa sus accesorios de configuración y los vuelve a renderizar automáticamente, por lo que no puede establecer dinámicamente centerMode esta manera. En su lugar, profundiza en el componente interno InnerSlider y establece la propiedad allí.