I am making a simple vertical carousel of elements using jQuery, it's all ready but I have a problem with the Transform property because working with him its a little weird. I display de code for more understanding:
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')
It's a simple problem, but I can't find the way to add px to the "translateY()". They replace the old px with the new ones and it does not move almost.
If you know a solution I will be very thankful!!
I found a better solution, i will share it to help those who are looking for something 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();
});
And the 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>