Swiper.js 将幻灯片移出视口/页面

问题描述 投票：0回答：1

我在 Swiper.js 上遇到了困难。我想要具有自动播放功能的循环滑动器，肯燃烧效果（从中心放大）并淡入下一个。我已经编码了所有内容，但每张幻灯片都会在 X 轴上变换并移动到网页显示区域之外的右端。

我已经有了带有 Elementor 插件的工作主页滑块，它似乎使用了过时的 Swiper.js 版本和特定的类，这使得不清楚如何添加视差、分页、导航等。此外，它无法在移动设备上正常工作。

我尝试使用较新版本的 Swiper.js 复制相同的效果，并对动态项目符号、导航、缩放过渡等所有内容进行编码，但由于某种原因，只有第一张幻灯片正确显示，然后所有其他幻灯片在 X 轴上移动大约向右 1365 像素。

这是一个代码笔，它看起来像这样：

https://codepen.io/JUDr-Martin-Kov-cs/pen/poBWXzW

HTML

  <!-- Custom styles for fullscreen slider -->
  <style>
    body, html {
      position: relative;
      height: 100%;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fcfcfc;
      font-size: 24px;
      animation: zoom;
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    .swiper-android .swiper-slide,
    .swiper-ios .swiper-slide,
    .swiper-wrapper {
        transform: translate3d(0, 0, 0);
    }
    @keyframes zoom {
        from {
            transform: scale(1);
        }
        to {
            transform: scale(1.3);
        }
    }
  </style>
</head>
<body>

<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
      <div class="swiper-slide" style="background-image: url('');"></div>
    </div>

  <!-- Add pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add navigation arrows -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

</body>
</html>

JS

document.addEventListener('DOMContentLoaded', function () {
    var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'horizontal', // or 'vertical'
        loop: true, // Enable loop mode

        // If we need pagination
        pagination: {
            el: '.swiper-pagination', // Specify the pagination container
            clickable: true, // Allow clickable pagination bullets
            dynamicBullets: true,
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next', // Specify the next button selector
            prevEl: '.swiper-button-prev', // Specify the previous button selector
        },

        // Autoplay
        autoplay: {
            delay: 5000, // Delay between transitions in milliseconds
            disableOnInteraction: false, // Disable autoplay when user interacts with swiper
        },

        // Fade effect
        speed: 2000,
        effect: 'fade', // Specify the transition effect
        fadeEffect: {
            crossFade: true
        }
    });
});

我不知道是什么原因导致了这个问题。我尝试在我的 codepen 上复制它，它所做的事情与我的网页上完全相同。

我尝试设置这些参数，但没有帮助：

    .swiper-slide {
      background-size: cover;
      background-position: center;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

有什么想法可以解决这个问题吗？

谢谢你

plugins slider swiper.js
1个回答
0
投票

好吧，我成功了。问题在于“动画”和“缩放”无法与“淡入淡出”过渡正常配合。然而，通过“比例”和“线性”参数可以实现相同的效果。 HTML 和 javascript 是通用的，无论如何都可以使用，并且可以轻松更改简化的 CSS 以满足您的需求。

从现在起，您只需更改导航箭头、分页项目符号并添加视差效果，而无需担心滑块本身。

这里是一个更正的代码，如果它对某人有帮助的话：

document.addEventListener('DOMContentLoaded', function () {
  var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal', // or 'vertical'
    loop: true,
    centeredSlides: true,
    
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      dynamicBullets: true,
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // Autoplay
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },

    // Use slide or fade transition effect
    speed: 2000,
    effect: 'fade',
    fadeEffect: {
          crossFade: true,
     },
  });
});
/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.swiper-container {
  width: 100vw;
  height: 100vh;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #fcfcfc;
  font-size: 24px;
}

.swiper-slide > .swiper-slide-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent no-repeat 50% 50% /cover;
}

body {
  text-align: center;
}

.swiper-slide .slide-01 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/03/slide-16-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-02 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2019/08/slide-01-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-03 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-05-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-04 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-07-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-05 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-09-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-06 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-13-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-07 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-08-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-08 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-11-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-09 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-04-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-10 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2019/08/slide-03-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-11 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-06-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-12 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-12-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-13 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-15-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-slide .slide-14 {
  background-image: url(https://martin-kovacs.com/wp-content/uploads/2024/02/slide-10-2048.jpg);
  transform-origin: 50% 50%;
}

.swiper-scale-effect .swiper-slide-cover {
  transition: 20s linear;
  transform: scale(1);
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
  transform: scale(1.3);
}

:root {
  --swiper-pagination-bottom: 40px;
  --swiper-theme-color: rgba(252, 252, 252, 0.85) !important;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #FCFCFC;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #262626;
}
.swiper-cube .swiper-cube-shadow:before {
  background: #262626;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper">
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
       <div class="swiper-container swiper-scale-effect">
    <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
        <!-- Slides -->
    <div class="swiper-slide">
      <div class="slide-01 swiper-slide-cover"></div>
      <div>Slide 01</div>
    </div>
    <div class="swiper-slide">
      <div class="slide-02 swiper-slide-cover"></div>
      <div>Slide 02</div>
    </div>
    <div class="swiper-slide">
      <div class="slide-03 swiper-slide-cover"></div>
      <div>Slide 03</div>
    </div>
    <div class="swiper-slide">
      <div class="slide-04 swiper-slide-cover"></div>
      <div>Slide 04</div>
    </div>
    <div class="swiper-slide">
      <div class="slide-05 swiper-slide-cover"></div>
      <div>Slide 05</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-06 swiper-slide-cover"></div>
      <div>Slide 06</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-07 swiper-slide-cover"></div>
      <div>Slide 07</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-08 swiper-slide-cover"></div>
      <div>Slide 08</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-09 swiper-slide-cover"></div>
      <div>Slide 09</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-10 swiper-slide-cover"></div>
      <div>Slide 10</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-11 swiper-slide-cover"></div>
      <div>Slide 11</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-12 swiper-slide-cover"></div>
      <div>Slide 12</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-13 swiper-slide-cover"></div>
      <div>Slide 13</div>
    </div>
          <div class="swiper-slide">
      <div class="slide-14 swiper-slide-cover"></div>
      <div>Slide 14</div>
    </div>
    </div>
  <!-- Add pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add navigation arrows -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
</div>
</div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.