@mozert-studio/mozert-slider 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mozert Studio
+
+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

@@ -1,3 +1,61 @@
-# Temporary Holding Version
+# Mozert Slider
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A dependency-free, touch-friendly, accessible carousel with 3D effects, free mode, virtual slides, parallax, zoom and every pagination style.
+
+- Core + all modules: ~18 KB gzip (core-only ~12 KB), no dependencies, jQuery optional
+- Effects: slide, fade, coverflow, cube, flip, cards, creative
+- Layout: infinite loop, responsive breakpoints, fractional slides per view, gaps, center mode, variable width, rows, vertical, RTL
+- Extras: free mode, mousewheel, scrollbar, parallax, zoom, virtual slides, hash navigation, marquee, video autoplay
+- Accessible by default, respects `prefers-reduced-motion`
+
+## Install
+
+```bash
+npm install @mozert-studio/mozert-slider
+```
+
+```js
+import Mozert from '@mozert-studio/mozert-slider';
+import '@mozert-studio/mozert-slider/css';
+import '@mozert-studio/mozert-slider/theme.css'; // optional arrows + dots styling
+
+new Mozert('.slider', { slidesToShow: 3, spaceBetween: 16, pagination: { type: 'dynamic' } });
+```
+
+Or with a script tag (after publishing to npm):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mozert-studio/mozert-slider@1/dist/mozert.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@mozert-studio/mozert-slider@1/dist/mozert.min.js"></script>
+```
+
+## Files in `dist/`
+
+| File | Purpose |
+| --- | --- |
+| `mozert.min.js` / `mozert.js` | Core + all modules (UMD) |
+| `mozert.core.min.js` | Core only, no effect modules |
+| `mozert.esm.mjs` | ES module |
+| `mozert.jquery.min.js` | `$.fn.mozert` |
+| `mozert.min.css`, `mozert-theme.min.css` | Layout and optional theme |
+
+## Develop
+
+```bash
+npm run build   # dist/
+npm run site    # website into site/
+npm run dev     # build + serve the website with live reload (http://localhost:5173)
+npm test        # needs Playwright (Chromium) and a jQuery file, see tests/
+```
+
+`site/` is a static website (Home, Features, Examples, Docs, Installation, API, Blog, Changelog) that you can host anywhere.
+
+## Publishing checklist
+
+1. Enable 2FA on your npm account.
+2. `npm view @mozert-studio/mozert-slider` should return 404 (name free), then `npm publish --access public`.
+3. Create the npm organisation `mozert-studio` (npmjs.com/org/create, free for public packages) and the GitHub repo `mozert-studio/mozert-slider` (or edit `repository` in `package.json`).
+
+## License
+
+MIT, Mozert Studio

package/dist/mozert-theme.css

@@ -0,0 +1,169 @@
+/*! Mozert 1.1.0 | optional theme | MIT
+ * Customize with CSS variables on .mozert-slider or any ancestor. */
+.mozert-slider {
+  --mozert-accent: #1f6feb;
+  --mozert-dot-active: var(--mozert-accent);
+  --mozert-arrow-size: 44px;
+  --mozert-arrow-bg: rgba(255, 255, 255, 0.92);
+  --mozert-arrow-fg: #14161a;
+  --mozert-arrow-shadow: 0 2px 10px rgba(10, 20, 40, 0.18);
+  --mozert-dot-color: rgba(20, 22, 26, 0.28);
+  --mozert-dot-size: 9px;
+}
+
+/* Arrows: text is hidden, the icon is drawn with CSS. */
+.mozert-prev,
+.mozert-next {
+  position: absolute;
+  z-index: 5;
+  top: var(--mozert-arrow-y, 50%);
+  display: grid;
+  place-items: center;
+  width: var(--mozert-arrow-size);
+  height: var(--mozert-arrow-size);
+  margin: calc(var(--mozert-arrow-size) / -2) 0 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mozert-arrow-bg);
+  color: var(--mozert-arrow-fg);
+  box-shadow: var(--mozert-arrow-shadow);
+  font-size: 0;
+  line-height: 0;
+  cursor: pointer;
+  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
+}
+.mozert-prev {
+  left: 12px;
+}
+.mozert-next {
+  right: 12px;
+}
+.mozert-prev::before,
+.mozert-next::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  box-sizing: border-box;
+  margin: -5px 0 0 -5px;
+  width: 10px;
+  height: 10px;
+  border-top: 2.5px solid currentColor;
+  border-right: 2.5px solid currentColor;
+  border-radius: 1px;
+}
+.mozert-prev::before {
+  transform: translateX(2px) rotate(-135deg);
+}
+.mozert-next::before {
+  transform: translateX(-2px) rotate(45deg);
+}
+.mozert-rtl .mozert-prev {
+  left: auto;
+  right: 12px;
+}
+.mozert-rtl .mozert-next {
+  right: auto;
+  left: 12px;
+}
+.mozert-rtl .mozert-prev::before {
+  transform: translateX(-2px) rotate(45deg);
+}
+.mozert-rtl .mozert-next::before {
+  transform: translateX(2px) rotate(-135deg);
+}
+.mozert-prev:hover,
+.mozert-next:hover {
+  transform: scale(1.06);
+}
+.mozert-prev:focus-visible,
+.mozert-next:focus-visible,
+.mozert-dots button:focus-visible {
+  outline: 2px solid var(--mozert-accent);
+  outline-offset: 2px;
+}
+.mozert-prev.mozert-disabled,
+.mozert-next.mozert-disabled {
+  opacity: 0.35;
+  transform: none;
+}
+
+/* Vertical: arrows move to the top and bottom edges. */
+.mozert-vertical .mozert-prev,
+.mozert-vertical .mozert-next {
+  left: 50%;
+  right: auto;
+  top: auto;
+  margin: 0 0 0 calc(var(--mozert-arrow-size) / -2);
+}
+.mozert-vertical .mozert-prev {
+  top: 10px;
+}
+.mozert-vertical .mozert-next {
+  bottom: 10px;
+}
+.mozert-vertical .mozert-prev::before {
+  transform: translateY(2px) rotate(-45deg);
+}
+.mozert-vertical .mozert-next::before {
+  transform: translateY(-2px) rotate(135deg);
+}
+
+/* Dots */
+.mozert-dots {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px;
+  margin: 14px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.mozert-dots li {
+  margin: 0;
+  padding: 0;
+}
+.mozert-dots button {
+  display: block;
+  width: var(--mozert-dot-size);
+  height: var(--mozert-dot-size);
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mozert-dot-color);
+  font-size: 0;
+  cursor: pointer;
+  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease;
+}
+.mozert-dots li.mozert-active button {
+  width: calc(var(--mozert-dot-size) * 2.4);
+  background: var(--mozert-dot-active);
+}
+.mozert-vertical .mozert-dots {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  z-index: 2;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0;
+  padding: 8px 5px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.55);
+  backdrop-filter: blur(4px);
+  transform: translateY(-50%);
+}
+.mozert-vertical .mozert-dots li.mozert-active button {
+  width: var(--mozert-dot-size);
+  height: calc(var(--mozert-dot-size) * 2.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mozert-prev,
+  .mozert-next,
+  .mozert-dots button {
+    transition: none;
+  }
+}

package/dist/mozert-theme.min.css

@@ -0,0 +1,3 @@
+/*! Mozert 1.1.0 | optional theme | MIT
+ * Customize with CSS variables on .mozert-slider or any ancestor. */
+.mozert-slider{--mozert-accent:#1f6feb;--mozert-dot-active:var(--mozert-accent);--mozert-arrow-size:44px;--mozert-arrow-bg:rgba(255,255,255,0.92);--mozert-arrow-fg:#14161a;--mozert-arrow-shadow:0 2px 10px rgba(10,20,40,0.18);--mozert-dot-color:rgba(20,22,26,0.28);--mozert-dot-size:9px}.mozert-prev,.mozert-next{position:absolute;z-index:5;top:var(--mozert-arrow-y,50%);display:grid;place-items:center;width:var(--mozert-arrow-size);height:var(--mozert-arrow-size);margin:calc(var(--mozert-arrow-size) / -2) 0 0;padding:0;border:0;border-radius:50%;background:var(--mozert-arrow-bg);color:var(--mozert-arrow-fg);box-shadow:var(--mozert-arrow-shadow);font-size:0;line-height:0;cursor:pointer;transition:transform 0.15s ease,opacity 0.15s ease,background-color 0.15s ease}.mozert-prev{left:12px}.mozert-next{right:12px}.mozert-prev::before,.mozert-next::before{content:"";position:absolute;left:50%;top:50%;box-sizing:border-box;margin:-5px 0 0 -5px;width:10px;height:10px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;border-radius:1px}.mozert-prev::before{transform:translateX(2px) rotate(-135deg)}.mozert-next::before{transform:translateX(-2px) rotate(45deg)}.mozert-rtl .mozert-prev{left:auto;right:12px}.mozert-rtl .mozert-next{right:auto;left:12px}.mozert-rtl .mozert-prev::before{transform:translateX(-2px) rotate(45deg)}.mozert-rtl .mozert-next::before{transform:translateX(2px) rotate(-135deg)}.mozert-prev:hover,.mozert-next:hover{transform:scale(1.06)}.mozert-prev:focus-visible,.mozert-next:focus-visible,.mozert-dots button:focus-visible{outline:2px solid var(--mozert-accent);outline-offset:2px}.mozert-prev.mozert-disabled,.mozert-next.mozert-disabled{opacity:0.35;transform:none}.mozert-vertical .mozert-prev,.mozert-vertical .mozert-next{left:50%;right:auto;top:auto;margin:0 0 0 calc(var(--mozert-arrow-size) / -2)}.mozert-vertical .mozert-prev{top:10px}.mozert-vertical .mozert-next{bottom:10px}.mozert-vertical .mozert-prev::before{transform:translateY(2px) rotate(-45deg)}.mozert-vertical .mozert-next::before{transform:translateY(-2px) rotate(135deg)}.mozert-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 0;padding:0;list-style:none}.mozert-dots li{margin:0;padding:0}.mozert-dots button{display:block;width:var(--mozert-dot-size);height:var(--mozert-dot-size);padding:0;border:0;border-radius:999px;background:var(--mozert-dot-color);font-size:0;cursor:pointer;transition:width 0.25s ease,height 0.25s ease,background-color 0.25s ease}.mozert-dots li.mozert-active button{width:calc(var(--mozert-dot-size) * 2.4);background:var(--mozert-dot-active)}.mozert-vertical .mozert-dots{position:absolute;top:50%;right:10px;z-index:2;flex-direction:column;flex-wrap:nowrap;align-items:center;margin:0;padding:8px 5px;border-radius:999px;background:rgba(255,255,255,0.55);backdrop-filter:blur(4px);transform:translateY(-50%)}.mozert-vertical .mozert-dots li.mozert-active button{width:var(--mozert-dot-size);height:calc(var(--mozert-dot-size) * 2.4)}@media (prefers-reduced-motion:reduce){.mozert-prev,.mozert-next,.mozert-dots button{transition:none}}