Swiper slider + animate css
Здравствуйте! Пытаюсь подключить анимаций (animate css) к слайдеру Swiper. Анимаций работают, но есть одна проблема.
При смене слайда он прокручивается в право или в лево, мне нужно это убрать, что бы слайда исчезали и появлялись на месте через анимацию. Не знаю на сколько правильно я делаю, в JS мало что понимаю. Посмотрите, пожалуйста, может кто знает как остановить прокрутку так, что бы все работало. https://codepen.io/anakin-skywalker94/pen/RmWxbE Спасибо! |
бесконечная карусель и animate css
ethereal,
как вариант ... <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.swiper-container {
width: 60%;
height: 90vh;
position: relative;
overflow: hidden;
margin: 20px auto;
}
.swiper-slide {
width: 100%;
height: 100%;
position: absolute;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
z-index:
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
<script>
document.addEventListener('DOMContentLoaded', function() {
var Img = document.querySelectorAll(".swiper-slide"),
ImgLength = Img.length,
ImgIndex = ImgLength - 2;
function hide()
{
Img[ImgIndex].classList.remove("bounce");
Img[ImgIndex].classList.add("rotateOut");
ImgIndex++;
ImgIndex %= ImgLength;
window.setTimeout(show, 700);
}
function show() {
Img[ImgIndex].classList.remove("rotateOut");
Img[ImgIndex].classList.add("bounce");
window.setTimeout(hide, 5000);
};
hide()
});
</script>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide rotateOut animated"><img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"></div>
<div class="swiper-slide rotateOut animated"><img src="https://www.wonderplugin.com/videos/demo-image0.jpg"></div>
<div class="swiper-slide rotateOut animated"><img src="https://www.theglobeandmail.com/resizer/cGAbGpC_6dJvungK4E_3iPM0ENI=/620x0/filters:quality(80)/arc-anglerfish-tgam-prod-tgam.s3.amazonaws.com/public/AZWCHIIOVNFPREIW4I55573SRE.JPG"></div>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:39. |