0

Estoy haciendo un slider con css y react

Tengo dos estados para mostrar una clase, mover el contenido hacia la izquierda o hacia la derecha según el botón que se presione

cuando doy a siguiente avanza la posición que quiero pero en el segundo clic vuelve a la posición original en lugar de avanzar

¿Cómo podría seguir avanzando?

Además de esto cuando coloco con la segunda clase pero con el movimiento contrario parece que se anulan y solo funciona una.

¿Cómo podría evitar que esto sucediera? dejo parte del codigo

const [next, setNext] = useState(true);
 const [prev, setPrev] = useState(false)
 const nextSlide = () => setNext(!next)
 const previouSide = () => setPrev(!prev)
 <>
      <BlogHearder>
        <div className='featues-header'>
          <h2 className='features-title'>Visit Our Blog</h2>
          <div className='feature-arrows'>
            <button className='feature-icon icon-left' onClick={previouSide}>
              <FiChevronLeft className='icon' />
            </button>
            <button className='feature-icon icon-right' onClick={nextSlide}>
              <FiChevronRight className='icon' />
            </button>
          </div>
        </div>
      </BlogHearder>
      <BlogCardWrapper ref={ref} >
        <div className={next ? 'blog-slider next' : 'blog-slider', prev? 'blog-slider' : 'blog-slider prev'  }>
          {state.map(blog => (
            <BlogCard key={blog.id} blog={blog} />
          ))}
        </div>
      </BlogCardWrapper>
     
    </>

Estoy usando styled components

BlogCardWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  .next{ 
    transform:translateX(-19%)
  }
  .prev{
    transform: translateX(19%);
  }
  .blog-slider {
    width: 250%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    transition: all 0.5s;
  }
`

para el movimiento horizontal hacia la derecha la clase .next y hacia la izquierda .prev

19% es el tamaño de mis tarjetas deslizantes

Gracias de antemano a quien pueda ayudarme.

1 respuesta 1

0

Sucede que cuando tu quieres presionar el boton next por segunda vez, cambiara el estado next a false! entonces retrocedera.

El segundo error sucede por que ahora luego de apretar en los dos botones tienes dos clases presentes, que se contradicen . mi solucion es poner un ref en el div que se movera. y cambiar los estilos desde una funcion en las flechas o de donde quieras que el usuario presione:

Deberias encontrar la forma de tener el index de tu foto para saber cuantas veces tienes que mover 19% por ejemplo

   const funcion = (event) =>{

           const index_de_foto = event.target.id

           const translatePercentage = index_de_foto * 19

           ref.current.style.transform=
                             `translateX({translatePercentage}%)`} 

Tu Respuesta

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

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