Code
<style>
.sbox{
opacity: 0;
transform: translateX(100%);
transition: opacity 0.8s ease, transform 0.8s ease;
grid-area: 1 / 1;
}
.sbox.active {
opacity: 1;
transform: translateX(0);
}
.prev,.next{
cursor: pointer;
}
.service_slider img {
filter: grayscale(100%);
transition: filter 0.4s ease;
cursor: pointer;
}
.service_slider .swiper-slide.swiper-slide-active img,
.service_slider .swiper-slide:hover img{
filter: grayscale(0%);
}
</style>
<script>
jQuery(document).ready(function($){
setTimeout(function() {
var slider = document.querySelector('.service_slider .swiper').swiper;
slider.on('slideChange', function () {
$(".sbox").removeClass("active");
$("#s_"+this.realIndex).addClass("active");
});
}, 500);
$('.service_slider .swiper-wrapper').on('click', '.swiper-slide', function () {
var slider = document.querySelector('.service_slider .swiper').swiper;
const realIndex = $(this).attr('data-swiper-slide-index');
slider.slideToLoop(realIndex);
$(".sbox").removeClass("active");
$("#s_"+realIndex).addClass("active");
});
/*Previous Slide Button*/
$(".prev").click(function(){
var swiper = document.querySelector('.service_slider .swiper').swiper;
swiper.slidePrev();
});
/*Next Slide Button*/
$(".next").click(function(){
var swiper = document.querySelector('.service_slider .swiper').swiper;
swiper.slideNext();
});
})
</script>
