swiper鼠标悬浮在大图内显示

Swiper鼠标悬浮显示

• 鼠标悬浮显示：当鼠标悬浮在Swiper轮播图上时，显示前进和后退按钮。310

实现方法

• 配置autoplay属性：设置autoplay属性中的disableOnInteraction为false，以确保用户操作后自动播放不会停止。5
• 监听鼠标事件：通过监听鼠标的mouseenter和mouseleave事件，控制Swiper的autoplay的暂停和开始。16
• CSS样式调整：使用CSS控制按钮的显示和隐藏，确保在鼠标悬浮时显示按钮。1

示例代码

var mySwiper = new Swiper('.swiper', {
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  loop: true,
  speed: 3000,
  on: {
    mouseenter: function () {
      mySwiper.stopAutoplay();
    },
    mouseleave: function () {
      mySwiper.startAutoplay();
    },
  },
});

• CSS样式：确保按钮在鼠标悬浮时可见。

  .swiper-button-next, .swiper-button-prev {
    display: none;
  }
  .swiper-container:hover .swiper-button-next,
  .swiper-container:hover .swiper-button-prev {
    display: block;
  }
  ```<a data-index="6" class='citation' href="#citation-1" target="_blank">1</a><a data-index="7" class='citation' href="#citation-6" target="_blank">6</a>