In this tutorial I will show you how to make this custom design from scratch using Elementor Pro.
Add these class name for all images
pic pic1
pic pic2
pic pic3
Add these attributes name for all dots
data-class | pic1 data-class | pic2 data-class | pic3
Add this CSS with section
/*add this css with section*/
selector .pic{
display: none;
transform: rotate(20deg)
}
selector .pic.pic1{
display: block;
}
Add this JS to anywhere of that page
var $ = jQuery;
$(document).ready(function(){
//after click
$("[data-class]").on("click", function(){
var dataClass = $(this).attr("data-class");
$('.pic').hide();
$('.'+dataClass).show();
});
});
0 Comments