javascript 如何将幻灯片与滑动条对齐？

下午好。请告诉我如何对齐幻灯片，以便当您选择左边或右边的第一张或最后一张幻灯片时，后面和前面的幻灯片数量相同。
换句话说，当选择第一张或最后一张幻灯片时，它应该是这样的：

但现在看起来是这样的

换句话说，如果第一张幻灯片处于活动状态，则在其左侧只有最后一张幻灯片，而倒数第二张幻灯片丢失。

var sliderSelector = '.swiper-container',
  options = {
    init: true,
    initialSlide: 1,
    loop: true,
    speed: 1200,
    slidesPerView: 1.6848, // or 'auto'
    spaceBetween: 0,
    centeredSlides: true,
    mousewheelControl: false,
    lazyLoading: true,
    slideToClickedSlide: true,
    effect: 'coverflow', // 'cube', 'fade', 'coverflow',
    autoplay: {
      delay: 10000,
      disableOnInteraction: false,
    },
    coverflowEffect: {
      rotate: 0, // Slide rotate in degrees
      stretch: 400, // Stretch space between slides (in px)
      depth: 380, // Depth offset in px (slides translate in Z axis)
      modifier: 1, // Effect multipler
      slideShadows: false, // Enables slides shadows
    },
    grabCursor: true,
    parallax: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function(index, className) {
        return `<span class="dot swiper-pagination-bullet">${index +1}</span>`;
      },
    },
    navigation: {
      nextEl: 0,
      prevEl: 0,
    },
    breakpoints: {
      1023: {
        slidesPerView: 5,
        spaceBetween: 0
      }
    },
    // Events
    on: {
      imagesReady: function() {
        this.el.classList.remove('loading');
      }
    }
  };
var mySwiper = new Swiper(sliderSelector, options);

// Initialize slider
mySwiper.init();

[class^="swiper-button-"],
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #E5E5E5;
}

.container {
  width: 1200px;
}

.swiper-slide-active img {
  outline: 10px solid rgba(255, 255, 255, 0.5);
  outline-offset: -10px;
}

.swiper-slide img {
  outline: 10px solid rgba(255, 255, 255, 0.5);
  outline-offset: -10px;
}

.swiper-slide img {
  position: relative;
}

.swiper-container {
  width: 100%;
  min-height: 470px;
  height: auto;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

.swiper-slide img {
  display: block;
  max-width: 100%;
  height: auto;
}

.swiper-container.swiper-container-coverflow {
  padding-top: 2%;
}

.swiper-container.loading {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in;
}

.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide .entity-img {
  display: none;
}

.swiper-slide .content {
  position: absolute;
  top: 40%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}

.swiper-slide .content .title {
  font-size: 2.6em;
  font-weight: bold;
  margin-bottom: 30px;
}

.swiper-slide img {
  filter: brightness(20%);
  transition: all 0.5s ease-in;
  position: relative;
  z-index: 2;
}

.swiper-slide-prev img {
  filter: brightness(40%);
  transition: all 0.5s ease-in;
}

.swiper-slide-next img {
  filter: brightness(40%);
  transition: all 0.5s ease-in;
}

.swiper-slide {
  outline: 10px solid #ffffff;
  outline-offset: -10px;
  position: relative;
  z-index: 5;
}

swiper-slide-next img {
  filter: brightness(50%);
  transition: all 0.5s ease-in;
}

.swiper-slide-active img {
  filter: brightness(100%);
  transition: all 0.5s ease-in;
}

.swiper-slide .content .caption {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

[class^="swiper-button-"] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.swiper-button-prev {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.swiper-button-next {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 9px;
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 0.4;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0px solid #fff;
  border-radius: 50%;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:hover,
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  transition: all 5s ease-in;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-width: 1px;
}

@media (max-width: 1180px) {
  .swiper-slide .content .title {
    font-size: 25px;
  }
  .swiper-slide .content .caption {
    font-size: 12px;
  }
}

@media (max-width: 1023px) {
  .swiper-container {
    height: 40vw;
  }
  .swiper-container.swiper-container-coverflow {
    padding-top: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>

<div class="wrapper">
  <div class="container">

    <section class="swiper-container loading">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>
        <div class="swiper-slide">
          <img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg">
        </div>

      </div>

      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </section>
  </div>
</div>

swiper似乎通过创建重复的幻灯片来工作，如果需要的话（以便有一些"备用"来显示它在循环时是否"用完"。
你有7张幻灯片，并希望5显示一次，所以我觉得它应该有足够的，而不创建任何备用-即总是有一个额外的2张幻灯片等待在机翼放进视图。然而，一定有一些东西在Swiper算法，使这不工作，它'用完'在您突出显示的情况下-例如，当幻灯片1是主幻灯片。
如果加上

loopAdditionalSlides: 10, // (10 is a generous guess, it'll be worth trying lower number)

到选项，然后使用

loop: true, // as you have now

并取出断点选项（https://swiperjs.com/api/的文档说明断点不适用于循环），然后屏幕上显示正确数量的幻灯片，因为它会自动循环或用户单击。
这就解决了眼前的问题。
然而，我注意到滑块似乎没有很好的响应-当视口变窄时，幻灯片的宽度不会变窄，slidesPerView参数似乎没有任何作用。我猜是硬编码容器宽度为1200px加上slidesPerView：1.6848考虑到了这一点-Swiper假设它有1200px可以播放，而不管视口的实际宽度是多少。有没有一种方法可以让Swiper根据视口宽度成比例地缩小幻灯片的宽度，以便在所有设备/窗口宽度上看到相同的视图（5张幻灯片，4张部分隐藏）？
因为你在1023px有一个断点，我猜你想要显示5个完整的幻灯片，如果 windows 比这更宽的话。这似乎是不可能的，因为它说断点不适用于循环。这很奇怪，因为循环和屏幕上有多少幻灯片是完全可见的似乎没有任何关系。如果它对你的应用程序很重要，可能值得在github上提高？

javascript 如何将幻灯片与滑动条对齐？

1条答案

相关问题

热门标签

最新问答