<!--Переключение изображений-->
<!--https://mt-webdesign.ru/image-slide-->
<script>
// Тригер для первой кнопки btn-trigger-1
$("body").on("mouseover", '.btn-trigger-1', function(){
$('.img-switch-1').toggleClass("animation-step-1");
$('.img-switch-1').removeClass("animation-step-2");
});
$("body").on("mouseout", '.btn-trigger-1', function(){
$('.img-switch-1').removeClass("animation-step-1");
$('.img-switch-1').toggleClass("animation-step-2");
});
var intervalId = window.setInterval(function(){
$('.img-switch-1').removeClass("animation-step-2");
}, 400);
// Тригер для второй кнопки btn-trigger-2
$("body").on("mouseover", '.btn-trigger-2', function(){
$('.img-switch-2').toggleClass("animation-step-1");
$('.img-switch-2').removeClass("animation-step-2");
});
$("body").on("mouseout", '.btn-trigger-2', function(){
$('.img-switch-2').removeClass("animation-step-1");
$('.img-switch-2').toggleClass("animation-step-2");
});
var intervalId = window.setInterval(function(){
$('.img-switch-2').removeClass("animation-step-2");
}, 400);
// Тригер для третьей кнопки btn-trigger-3
$("body").on("mouseover", '.btn-trigger-3', function(){
$('.img-switch-3').toggleClass("animation-step-1");
$('.img-switch-3').removeClass("animation-step-2");
});
$("body").on("mouseout", '.btn-trigger-3', function(){
$('.img-switch-3').removeClass("animation-step-1");
$('.img-switch-3').toggleClass("animation-step-2");
});
var intervalId = window.setInterval(function(){
$('.img-switch-3').removeClass("animation-step-2");
}, 400);
</script>
<style>
.img-switch-1, .img-switch-2, .img-switch-3 {
transition-duration: 500ms;
top: -100% !important;
opacity: 0;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animation-step-1 {
transition-duration: 500ms;
top: 50% !important;
transform: translate(0%, -50%);
opacity: 1;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animation-step-2 {
transition-duration: 300ms;
top: 100% !important;
opacity: 0;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
</style>