主页 / 问题 / 1437925
Accepted
Triceps Senju
Asked:2022-08-10 04:48:08 +0000 UTC2022-08-10 04:48:08 +0000 UTC

我怎样才能做到这一点，当我将鼠标悬停在幻灯片元素上时，它会增加，而其他可见元素会减少？

  • 772

我正在尝试制作一个旋转木马，当将鼠标悬停在幻灯片上时，它会增加它的宽度并减少其余部分。https://imgur.com/a/S13FBof这里是滑块设计的截图（由于某种原因我无法直接添加截图）。我在 Internet 上找不到相同的滑块来查看他们是如何实现的。 https://aliserb.github.io/liya/这就是我实现它的方式，但我不喜欢我所做的，因为浏览器控制台中出现了我不明白如何修复的错误）并且有问题调整此滑块时。从本质上讲，我这样做是为了在将鼠标悬停在幻灯片上时，显示 212px 的宽度，用于显示在视图中且具有 swiper-slide-visible 类的幻灯片，并且当光标离开时宽度为 100%。进一步在 css 中，我添加了悬停和 566px 宽度。

    let aboutSliderItem = document.querySelectorAll('.about_slider_item');

aboutSliderItem.forEach((aboutSliderLoop) => {
    // let itemPar = querySelector(".about_info .p");
    let sliderWidthReduce = () => {
        for (let i = 0; aboutSliderItem.length; i++) {
            if (aboutSliderItem[i].classList.contains("swiper-slide-visible")) {
                aboutSliderItem[i].style.width = "212px";
            }
        }
    }

    let sliderWidthreturn = () => {
        for (let i = 0; aboutSliderItem.length; i++) {
            aboutSliderItem[i].style.width = "100%";
        }
    }

    aboutSliderLoop.addEventListener('mouseover', sliderWidthReduce);
    aboutSliderLoop.addEventListener('mouseout', sliderWidthreturn);
})

我怎样才能使这个滑块更好和自适应））

javascript swiper

1 个回答

  1. Best Answer

    Swiper有一个参数watchSlidesProgress，启用哪个类会出现在幻灯片上.swiper-slide-visible（默认情况下，你可以用参数改变它slideVisibleClass），当在参数中使用数值时表现奇怪slidesPerView，它表示显示幻灯片的数量（奇怪的是，当slidesPerView: 3只有一个.swiper-slide-visible) 时，虽然一切正常，但当 时slidesPerView: 'auto'，这就是我开始的地方。

    我不是通过 进行缩进spaceBetween，而是通过我设置宽度的包装器 ( .swiper-slide-wrapper)进行缩进width: calc(100% - *отступ*)。

    动画是这样工作的：

    • 默认状态：宽度.swiper-slide为width: calc(100% / 3)- 将显示 3 张幻灯片。
    • 悬停时：所有 的宽度.swiper-slide-visible，除了:hover, 等于 的width: 25%那个，还有:hover-的那个width: 50%。

    const swiper = new Swiper('.swiper', {
  slidesPerView: 'auto',
  spaceBetween: 0,
  watchSlidesProgress: true
});
    @import url(https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css);

.swiper {
  display: block;
  width: 500px;
  height: 150px;
  margin: 0 auto;
}

.swiper-slide {
  width: calc(100% / 3);
  height: 100%;
  transition: width .3s ease;
}

.swiper-wrapper:hover .swiper-slide-visible:not(:hover) {
  width: 25%;
}

.swiper-slide-visible:hover {
  width: 50%;
}

.swiper-slide-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 20px);
  height: 100%;
  background: #ccc;
}
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 1</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 2</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 3</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 4</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 5</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 6</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-slide-wrapper">Slide 7</div>
    </div>
  </div>
</div>

    • 1

相关问题