Swiper-Mouseover

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

Demo

👉 https://codesandbox.io/p/sandbox/swiper-mouseover-q9h6cf

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 class="swiper-mouseover"></div>
</div>

4. Initialize Swiper with Mouseover:

const swiper = new Swiper('.mySwiper', {
  modules: [MouseoverPlugin],
  mouseover: {
    el: '.swiper-mouseover',
    reset: true // reset to first slide on mouseout
  }
});

Key Features

• Native Swiper Integration: Works like other official Swiper modules;
• Touch Device Detection: Automatically disabled on touchscreen devices;
• Customizable: Specify your own mouseover element selector;
• Lightweight: Adds minimal overhead to your bundle;
• Accessible: Preserves standard Swiper functionality.

Behavior Notes

• The plugin creates transparent overlay layers that intercept mouse events;
• Standard Swiper controls remain visible but non-interactive when mouseover is active;
• Slides automatically return to the first position when mouse leaves the container;
• Fully compatible with other Swiper plugins and features.