Estoy tan atascado y me pregunto si debería seguir confiando en translate3d para desplazarme.
Estoy creando mi propio control deslizante/carrusel personalizado que puede mostrar varios carteles a la vez según el tamaño de la pantalla. Pero cuando me desplazo con el mouse, obtengo resultados mixtos, si no uso los botones, se desplaza con el mouse hacia adelante y hacia atrás sin problemas, pero tan pronto como hago clic en cualquiera de los botones izquierdo/derecho, el ratón dejará de desplazarse.
Tengo un botón izquierdo y derecho (absoluto). En cada desplazamiento, desplazan un conjunto de elementos (3 - 5 elementos) usando translate3d(), y funcionan perfectamente bien y como se esperaba.
<div class="container" style="display:flex; position:relative"> <!---- Slider ----> <div class="slider" style="display:flex;> <div class="slide"> <img src="..." /> </div> <div class="slide"> <img src="..." /> </div> <div class="slide"> <img src="..." /> </div> <div class="slide"> <img src="..." /> </div> <!--- more slides --> </div> <!--- buttons on opposite ends of the slider, scrolls using translate3d() ---> <div class="left" style="position:absolute;"></div> <div class="right" style="position:absolute;"></div> </div>
Las soluciones que he intentado hacer que translate3d funcione están a continuación.
Mi instinto me dice que solo vaya con scrollLeft, o desplácese a la vista, y dé por terminado el día. Pero escuché que el rendimiento de translateX es muy superior, ¿se ha confirmado esto absolutamente? ¿Y existen alternativas bastante recientes y adoptadas que también funcionan bien?
Gracias