Swiper-Mouseover

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

Demo

:point_right: 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:
`html


`
or use CDN:
`html


`

#### 3. Add Swiper HTML Layout:
`html



`

#### 4. Initialize Swiper with Mouseover:
`js
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.