swiper-mouseover 2.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Pavel Romanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# Swiper-Mouseover
+Small plugin for [Swiper](https://github.com/nolimits4web/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 <link> to the required:
+```html
+<link href="/path/to/swiper-mouseover.min.css" rel="stylesheet">
+<script src="/path/to/swiper-mouseover.min.js"></script>
+```
+or use CDN:
+```html
+<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:
+```html
+<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:
+```js
+const swiper = new Swiper('.mySwiper', {
+  modules: [MouseoverPlugin],
+  mouseover: {
+    el: '.swiper-mouseover'
+  }
+});
+```
+
+## 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.

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "swiper-mouseover",
+  "version": "2.0.1",
+  "description": "Mouseover plugin for Swiper",
+  "files": [
+    "swiper-mouseover.js",
+    "swiper-mouseover.min.js",
+    "swiper-mouseover.css",
+    "swiper-mouseover.min.css"
+  ],
+  "scripts": {
+    "test": "echo \"Tests skipped\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fibit/swiper-mouseover.git"
+  },
+  "keywords": [
+    "swiper",
+    "swiper-plugin",
+    "slider",
+    "carousel",
+    "mouseover",
+    "mouse-navigation",
+    "hover-navigation"
+  ],
+  "author": "Pavel Romanov",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/fibit/swiper-mouseover/issues"
+  },
+  "homepage": "https://github.com/fibit/swiper-mouseover#readme",
+  "peerDependencies": {
+    "swiper": ">=11.0.0"
+  }
+}

package/swiper-mouseover.css

@@ -0,0 +1,16 @@
+/**
+ * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Author Pavel Romanov
+ * Released under the MIT License
+ */
+.swiper-mouseover {
+  display: flex;
+  position: absolute;
+  inset: 0;
+  z-index: 11;
+}
+
+.swiper-mouseover-layer {
+  flex: 1 0 0%;
+  height: 100%;
+}

package/swiper-mouseover.js

@@ -0,0 +1,63 @@
+/**
+ * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Author Pavel Romanov
+ * Released under the MIT License
+ */
+function MouseoverPlugin({ swiper, extendParams, on }) {
+  extendParams({
+    mouseover: {
+      el: null
+    }
+  });
+
+  const initMouseover = () => {
+    const { el } = swiper.params.mouseover;
+    
+    if (!el) return;
+    
+    const mouseoverEl = typeof el === 'string' 
+      ? document.querySelector(el) 
+      : el;
+    
+    if (!mouseoverEl) return;
+
+    if ('ontouchstart' in window) {
+      mouseoverEl.remove();
+      return;
+    }
+
+    mouseoverEl.innerHTML = '';
+
+    mouseoverEl.querySelectorAll('.swiper-mouseover-layer').forEach(el => {
+      el.removeEventListener('mouseover', handleMouseOver);
+      el.removeEventListener('mouseout', handleMouseOut);
+    });
+
+    for (let i = 0; i < swiper.snapGrid.length; i++) {
+      const layer = document.createElement('div');
+      layer.className = 'swiper-mouseover-layer';
+      layer.setAttribute('data-swiper-slide-index', i);
+      mouseoverEl.appendChild(layer);
+      layer.addEventListener('mouseover', handleMouseOver);
+      layer.addEventListener('mouseout', handleMouseOut);
+    }
+
+    function handleMouseOver() {
+      const slideIndex = parseInt(this.getAttribute('data-swiper-slide-index'));
+      swiper.slideTo(slideIndex, swiper.params.speed);
+    }
+
+    function handleMouseOut() {
+      swiper.slideTo(0, swiper.params.speed);
+    }
+  };
+
+  on('afterInit', initMouseover);
+  on('destroy', () => {
+    const { el } = swiper.params.mouseover;
+    if (el) {
+      const mouseoverEl = typeof el === 'string' ? document.querySelector(el) : el;
+      if (mouseoverEl) mouseoverEl.remove();
+    }
+  });
+};

package/swiper-mouseover.min.css

@@ -0,0 +1,6 @@
+/**
+ * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Author Pavel Romanov
+ * Released under the MIT License
+ */
+.swiper-mouseover{display:flex;position:absolute;inset:0;z-index:11}.swiper-mouseover-layer{flex:1 0 0%;height:100%}

package/swiper-mouseover.min.js

@@ -0,0 +1,6 @@
+/**
+ * Swiper-Mouseover v2.0.1 for Swiper (https://github.com/fibit/swiper-mouseover)
+ * Author Pavel Romanov
+ * Released under the MIT License
+ */
+function MouseoverPlugin({swiper:e,extendParams:t,on:o}){t({mouseover:{el:null}});o("afterInit",(()=>{const{el:t}=e.params.mouseover;if(!t)return;const o="string"==typeof t?document.querySelector(t):t;if(o)if("ontouchstart"in window)o.remove();else{o.innerHTML="",o.querySelectorAll(".swiper-mouseover-layer").forEach((e=>{e.removeEventListener("mouseover",r),e.removeEventListener("mouseout",s)}));for(let t=0;t<e.snapGrid.length;t++){const e=document.createElement("div");e.className="swiper-mouseover-layer",e.setAttribute("data-swiper-slide-index",t),o.appendChild(e),e.addEventListener("mouseover",r),e.addEventListener("mouseout",s)}}function r(){const t=parseInt(this.getAttribute("data-swiper-slide-index"));e.slideTo(t,e.params.speed)}function s(){e.slideTo(0,e.params.speed)}})),o("destroy",(()=>{const{el:t}=e.params.mouseover;if(t){const e="string"==typeof t?document.querySelector(t):t;e&&e.remove()}}))}