Zoom on mouseover in Swiper JS

Question

Is it possible to get the zoom functionality to happen when a user mouses over a slide, rather than double-taps? The double-tap method is great for touch, but for desktop it's not so intuitive, plus it plays havoc with other interactive elements (e.g. links, etc.)

Having the zoom by mouseover should allow a user to navigate around the zoomed slide image too in relation to the position of the mouse to the center of the slide. Moving the mouse to the top right would pan and zoom the slide image to the top right area, same with moving the mouse to any other corner or area within the zoom container.

If there was a switch to also enable inverted panning on the zoom that could be handy too (e.g. moving cursor to the top left would pan and zoom to bottom right of image).

Answer 1

You can call following method on mouse over event.

mySwiper.zoom.in

Here mySwiper is the instance of Swiper class.You can get information following link. Here is the example.

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

zoom in and zoom out of images using Swiper js library.

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();
})
}