Estoy haciendo un carrusel vertical simple de elementos usando jQuery, todo está listo pero tengo un problema con la propiedad Transform porque trabajar con él es un poco raro. Muestro el código para una mayor comprensión:
let element_height = $(".faq-carousel li.visible").outerHeight(true) + 5; $(".faq-carousel li").css("transition", "transform 0.5s") $(".faq-carousel li").css("transform", "translateY(-" + element_height + "px)" ); setTimeout( function() { $(".faq-carousel li").css( { transition: "none" } ) }, 500 ); $(".faq-carousel li.visible").removeClass('visible').next().addClass('visible')Es un problema simple, pero no puedo encontrar la manera de agregar px a "translateY()". Reemplazan los px viejos por los nuevos y no se mueve casi.
si saben alguna solucion les estare muy agradecido!!
Encontré una solución mejor, la compartiré para ayudar a aquellos que buscan algo similar:
let carousel_height = 0; $("#faq_carousel_arrow_down").click(function(e) { let element_height = $(".faq-carousel li.visible").outerHeight(true) + 5; carousel_height += parseInt(element_height); $(".faq-carousel li").css("transition", "transform 0.5s") $(".faq-carousel li").css("transform", "matrix(1, 0, 0, 1, 0, -" + carousel_height + ")" ); $(".faq-carousel li.visible").removeClass('visible').next().addClass('visible') e.preventDefault(); });Y el HTML:
<ul class="faq-carousel"> <li class="item shadow t1 visible"> <div> </div> </li> <li class="item shadow t2"> <div> </div> </li> </ul> <a href="#" id="faq_carousel_arrow_down"><i class="fas fa-angle-down"></i></a>