Swiper-Mouseover

Small plugin for Swiper. Adds the ability to automatically change slides with mouse movement.

Demo

👉 https://codesandbox.io/s/magical-sea-zxwfjs

How use

1. Include Swiper

See https://swiperjs.com/get-started#installation

2. Include Mouseover:

Pull-in a latest version with NPM:

npm i swiper-mouseover

and provide to the required:

<link href="/path/to/swiper-mouseover.min.css" rel="stylesheet">
<script src="/path/to/swiper-mouseover.min.js"></script>

or use CDN:

<link href="https://cdn.jsdelivr.net/gh/fibit/swiper-mouseover@main/swiper-mouseover.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/fibit/swiper-mouseover@main/swiper-mouseover.min.js"></script>

3. Add Swiper HTML Layout:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
</div>

4. Initialize Swiper with Mouseover:

const swiper = new Swiper('.mySwiper', {
  on: {
    init: function() {
      this.mouseover();
    },
  },
});

Important features

• Swiper-Mouseover generates hidden layers over the slides to monitor mouse movements, rendering all active slider elements unclickable. For instance, if you incorporate pagination or navigation elements, they will serve a purely decorative purpose;
• Swiper-Mouseover is automatically disabled on devices with touchscreen support. In other words, Swiper will function as usual on all mobile devices.