Форум

ethereal · #1 (**permalink**) 03.06.2019, 19:32

Здравствуйте! Пытаюсь подключить анимаций (animate css) к слайдеру Swiper. Анимаций работают, но есть одна проблема.

При смене слайда он прокручивается в право или в лево, мне нужно это убрать, что бы слайда исчезали и появлялись на месте через анимацию.

Не знаю на сколько правильно я делаю, в JS мало что понимаю. Посмотрите, пожалуйста, может кто знает как остановить прокрутку так, что бы все работало.

https://codepen.io/anakin-skywalker94/pen/RmWxbE

Спасибо!

рони · #2 (**permalink**) 03.06.2019, 23:54

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>

Форум

Справочник

Discord чат

Курсы javascript