0

soy nuevo en react, y estoy intentando aplicar un efecto cuando no tengo mas imagenes en mi carrousel. Estoy utilizando react-slick, y si bien pude configurar varias cosas gracias a la documentacion que tienen no puedo aplicar este efecto...

Lo que deberia suceder es que una vez que no haya mas imagenes en el carrousel, haga una especie de "barrido" hacia la primera imagen.. Dichas imagenes las estoy obteniendo de un get por ende puedo tener muchas imagenes o pocas, estuve investigando y creo que deberia hacer un if con un slickGoTo, pero honestamente no se como obtener los valores para hacerlo.. agradesco cualquier ayuda!

este es mi codigo:

function SampleNextArrow(props) {
  const { onClick } = props;
  return (
    <button type='button' onClick={onClick} className="slick-next slick-arrow" style={{ right: '0vw' }}><FaChevronRight size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
  );
}

function SamplePrevArrow(props) {
  const { onClick } = props;
  return (
    <button type='button' onClick={onClick} className="slick-prev slick-arrow" style={{ left: '0vw' }}><FaChevronLeft size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
  );
}
const settings = {
      initialSlide: 0,
      infinite: false,
      cssEase: 'linear',
      mobileFirst: true,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      variableWidth: true,
      responsive: 
      [{
        breakpoint: 425,
        settings: {
          slidesToShow: 2, slidesToScroll: 1, infinite: false
        }
      },
      {
        breakpoint: 320,
        settings: {
          slidesToShow: 1, slidesToScroll: 1, infinite: false
        }
      }]
    };



return (
              <div className='container'>
                <Slider {...settings} >
                  {
                    elementos.map((item, index) => { 
                        return (
                               <p>{item.name}</p>
                               <p>{item.subtitle}</p>
                            )
                    })
                  }  

                </Slider>
               </div>

)

1 respuesta 1

0

Intentaré ayudarte en lo que planteas y leyendo la documentación de SlickSlider dice que lo que recibe como parámetro en la función slickGoTo es el index así que si quieres llegar nuevamente al prinpio, solo es cuestión de pasarle el index 0 a la función, pero para ello debes primero crear la referencia. Te explico poco a poco:

constructor(props) {
  super(props)
  // primero creamos la referencia dentro de tu constructor
  this.sliderInnerRef = ref => this.innerSlider = ref
}

render() {
   ...
   {/** En tu método render, en el lugar donde defines el Slider */}
   <Slider
    ref={this.sliderInnerRef}
    ...
    >
     ...
   </Slider>
   ...
}

De esta forma ya tienes una referencia del componente Slider, la pregunta es. ¿Ahora cuando sé en qué momento llamarlo? (la documentación de esta librería es muy pobre, tuve que ir al código directamente a leer qué hacía, por suerte es corto). No hay un evento al que puedas suscribirte para saber si la imagen que está viendo el usuario es la última o no, pero descubrí unos props que pueden brindarnos mucha ayuda, entonces pasamos a tu componente de SampleNextArrow, porque el es quien recibe esos parámetros:

function SampleNextArrow(props) {
  // además de onClick, también recibimos un ´currentSlide´ (slide actual)
  // y un `slideCount` (número de slides)
  const { onClick, currentSlide, slideCount } = props;

  const wrappedOnClick = wrapperOnClick(onClick, currentSlide, slideCount)

  return (
    <button type='button' onClick={wrappedOnClick} className="slick-next slick-arrow" style={{ right: '0vw' }}><FaChevronRight size={'20px'} style={{ color: '#21849C', cursor: 'pointer' }} /></button>
  );
}

Como ves cree una función llamada wrapperOnClick que básicamente lo que hará esta función es validar cuando será la última parte del slide. Y para ello podemos ayudarnos de currentSlide y slideCount para determinar que hacer:

function wrapperOnClick(onClick, currentSlide, slideCount) {
  // Teniendo en cuenta que el primer elemento del slide es el número 0
  // entonces debemos sumarle 1 a currentSlide o bien, restarle uno a
  // slideCount, de esta forma sabemos que es el último. Otra forma es
  // pasarle directamente el tamaño de tu lista de elemntos, es decir
  // if (currentSlide + 1 >= elementos.length), es igualmente válido
  if ((currentSlide + 1) >= slideCount) {
    return () => { this.innerSlide.slickGoTo(0) };
  } else {
    return onClick;
  }
}

De esa forma ya puedes correr una acción al final de tu slider. Ahora, si hace el efecto de barrido o no, eso no lo sé, no sé mucho más acerca del plugin, lo que si puedes hacer aunque puede ser un poco malo para el rendimiento es ir pasando slide por slide hasta llegar al primero. Para hacer eso puedes comentarme si lo necesitas también y con gusto te ayudaré también.

NOTA: No he hecho pruebas de esto, es algo más teórico que práctico, nunca he usado el plugin y respondo en base al código que leí en github. No puedo asegurarte que la aplicación mande los parámetros cero-indexados, así que en caso de que no, puedes verificar cual es el primer index y hacer el condicional correspondiente

ACTUALIZACIÓN

Leyendo el código que planteas en el sandbox, veo que al momento de responderte no tuve en cuenta el tema de los breakpoints y que podías estar mostrando más de un slide a la vez, lo cual es importante, y vas por buen camino hasta donde vas ahora.

He probado el método slickGoTo(0) y funciona de la forma en la que esperas que funcione. Lo que te falta es volver tu función una clase, para que de esa forma puedas usar la referencia, porque no tienes otra forma de poder llamar a ese método que con una referencia.

Otra cosa que he notado, y la verdad por tiempo no puedo darte una solución exacta, pero veo que una vez se alcanza el límite de slides para mostrar, entonces internamente el componente de Slide deja de llamar al onClick en el botón, lo que ocasiona que casi que cualquier evento que queramos recibir al momento que se acaba el slide es nulo. Sin embargo, conociendo el método slickGoTo(), puedes implementar tus propios botones de next y back, teniendo en cuenta también el número de slides que se muestran de acuerdo al breakpoint, te dejaré éste enlace para que puedas ver cómo acomodé el código para que te des una idea

Cualquier duda, pregunta y comenta, con gusto te ayudaré a resolver

11
  • Hola German, antes que nada te super agradezco lo que me pasaste y que te hayas puesto a investigar, esta clarisimo todo, pero el problema es que al probarlo no funciona.. resulta que counterSlide, al segundo click en la flecha de next llega solo a 2, por ende no es mayo que slidecount..
    – larry_82
    el 1 abr. 2019 a las 22:43
  • Cuantos elementos tienes en tu lista de elements? verifica, y lee la nota que puse en la respuesta el 2 abr. 2019 a las 13:01
  • Hola German, de a momento tengo solo 6 elementos, como verifico cual es el primer index? pueo acceder al index de cada elemento utilizando el index del map que uso para repetir los elementos, pero asumos que eso no me sirve de nada por fuera del map..
    – larry_82
    el 2 abr. 2019 a las 13:12
  • En el comentario me mencionas que es counterSlide puedes verificar que estás usando el que te dije, que fue: currentSlide el 2 abr. 2019 a las 13:44
  • German, disculpa, sisi es el currentSlide el que mencione que solo llega hasta 2..el slideCount me dice el total de las imagenes que hay, que esta bien porque son 6
    – larry_82
    el 2 abr. 2019 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.