Code
<style>
.sbox{
transform: scaleY(0);
transition: all 1s;
}
.sbox.active{
transform: scaleY(1);
}
.nav{
cursor: pointer;
}
.nav.active{
border-color: #fff !important;
}
</style>
<script>
jQuery(document).ready(function($){
setTimeout(function() {
var slider = document.querySelector('.home_slider .elementor-background-slideshow').swiper;
slider.on('slideChange', function () {
var slideno = this.realIndex+1;
$(".sbox").removeClass("active");
$("#s_"+this.realIndex).addClass("active");
$(".nav").removeClass("active");
$("#nav_"+this.realIndex).addClass("active");
});
}, 500);
$(".nav").click(function(){
var navid = $(this).attr("id");
var realid = navid.split('_');
console.log(realid);
$(".sbox").removeClass("active");
$("#s_"+realid[1]).addClass("active");
$(".nav").removeClass("active");
$("#nav_"+realid[1]).addClass("active");
let swiper = $('.elementor-background-slideshow').data('swiper');
swiper.slideToLoop(realid[1]);
if (swiper.autoplay) {
swiper.autoplay.start();
}
});
})
</script>
