在 Swiper JS 中放大鼠标悬停

Question

是否可以在用户将鼠标悬停在幻灯片上而不是双击时实现缩放功能？双击方法非常适合触摸，但对于桌面来说就不那么直观了，而且它会对其他交互元素（例如链接等）造成严重破坏

通过鼠标悬停进行缩放应该允许用户相对于鼠标在幻灯片中心的位置在缩放的幻灯片图像周围导航。将鼠标移动到右上角会将幻灯片图像平移并缩放到右上角区域，与将鼠标移动到缩放容器内的任何其他角落或区域相同。

如果有一个开关也可以在缩放时启用反向平移，那也很方便（例如，将光标移动到左上角会平移和缩放到图像的右下角）。

Answer 1

您可以在鼠标悬停事件上调用以下方法。

mySwiper.zoom.in

这里mySwiper是Swiper的实例class.You可以获取link后面的信息。这是例子。

window.Myswiper = new Swiper('.swiper-container', {
  zoom: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
img1.addEventListener("mousemove", function() {
if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img1.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})
img2.addEventListener("mousemove", function() {
  if(Myswiper.zoom.scale < 2)
  Myswiper.zoom.in()
})
img2.addEventListener("mouseout", function() {
  Myswiper.zoom.out()
})

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  overflow: hidden;
}

<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img1" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-hi.png">
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-zoom-container">
        <img id="img2" src="http://www.clker.com/cliparts/3/k/L/m/P/2/yellow-apple-md.png">
      </div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination-white"></div>
  <!-- Add Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Answer 2

使用 Swiper js 库放大和缩小图像。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/zakiwarfel/128.jpg" class="media-object img-circle thumbnail">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" class="media-object img-circle thumbnail">
            </div>
        </div>
        <div class="swiper-slide">Plain slide with text</div>
        <div class="swiper-slide">
            <!-- Override maxRatio parameter -->
            <div class="swiper-zoom-container" data-swiper-zoom="5">
                <img src="path/to/image1.jpg">
            </div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JS

var mySwiper = new Swiper('.swiper-container', {
  zoom: {
    maxRatio: 5,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
   }
});

var swiperSlide = document.getElementsByClassName('swiper-slide')
for(var index = 0; index< swiperSlide.length; index++){
swiperSlide[index].addEventListener('mouseover',function(e){
    mySwiper.zoom.in();
})

swiperSlide[index].addEventListener('mouseout',function(e){
    mySwiper.zoom.out();
})
}

Answer 3

对于正在使用 react-id-swiper 并且还使用 Swiper 垂直缩略图

的用户

这是代码示例。

componentWillUpdate(nextProps, nextState) {
  if (nextState.gallerySwiper && nextState.thumbnailSwiper) {
    const { gallerySwiper, thumbnailSwiper } = nextState

    gallerySwiper.controller.control = thumbnailSwiper;
    thumbnailSwiper.controller.control = gallerySwiper;

    var swiperSlide = document.getElementsByClassName('swiper-zoom-container')
    for(var index = 0; index<swiperSlide.length; index++){
      swiperSlide[index].addEventListener('mouseover',function(e){
        gallerySwiper.zoom.in();
      })
      swiperSlide[index].addEventListener('mouseout',function(e){
        gallerySwiper.zoom.out();
      })
    }
  }
}

在 Swiper JS 中放大鼠标悬停

Zoom on mouseover in Swiper JS

javascript

swiper

reactjs