I am pretty new to angular and I want to create a 3d carousel slider like this in angular. How can I approach this problem? please see the link for better presentation of the problem
function rotateLeft(){
if(on == 0){
$('.p_slider__item:nth-of-type(' + pos + ')').animate({'left':'200px'},200)
$('.p_slider__item:nth-of-type(' + pos + ')').css('z-index','0')
$('.p_slider__item:nth-of-type(' + pos2 + ')').animate({'left':'-200px'},200)
setTimeout (function(){
$('.p_slider__item:nth-of-type(' + pos2 + ')').css({'transform':'scale(0.6)','opacity':'0.8','webkit-filter':'blur(2px)','z-index':'1'});
pos++;pos2++;pos3++;
if(pos > 3){pos = 1}if(pos2 > 3){pos2 = 1;}if(pos3 > 3){pos3 = 1;}
},400)
$('.p_slider__item:nth-of-type(' + pos3 + ')').animate({'left':'0px'},200)
$('.p_slider__item:nth-of-type(' + pos3 + ')').css({'transform':'scale(1)','opacity':'1','webkit-filter':'blur(0px)','z-index':'2'})
setTimeout (function(){
on = 0; // Accept clicks again
},time)
}
}
from how to implement 3d slider in angular 10
No comments:
Post a Comment