Installation

Pick the way that suits your project. Nothing else needs to be installed.

npm

npm install @mozert-studio/mozert-slider

import Mozert from '@mozert-studio/mozert-slider';
import '@mozert-studio/mozert-slider/css';          // required layout styles
import '@mozert-studio/mozert-slider/theme.css';    // optional arrows and dots styling

const slider = new Mozert('.slider', { dots: true });

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mozert-studio/mozert-slider@1/dist/mozert.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mozert-studio/mozert-slider@1/dist/mozert-theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/@mozert-studio/mozert-slider@1/dist/mozert.min.js"></script>
<script>new Mozert('.slider', { dots: true });</script>

The CDN URLs work after the package has been published to npm. Until then, copy the files from dist/.

Which file?

File	Use it for
`mozert.min.js`	Default. Core and every module (effects, pagination types, free mode, zoom, virtual, and so on).
`mozert.core.min.js`	Core features only; smallest download.
`mozert.esm.mjs`	ES module for bundlers (`import` resolves to this automatically).
`mozert.jquery.min.js`	Adds `$.fn.mozert`.

Frameworks

Official packages for React and Vue 3. They create the slider after the component mounts, destroy it before the framework removes anything, and rebuild it when slides are added, removed or reordered, or an option changes. Import the slider CSS once.

npm install @mozert-studio/react @mozert-studio/mozert-slider

// root layout
import '@mozert-studio/mozert-slider/css';
import '@mozert-studio/mozert-slider/theme.css';

import MozertSlider from '@mozert-studio/react';

<MozertSlider slidesToShow={3} spaceBetween={16} dots thumbs lightbox onChange={(i) => console.log(i)}>
  {products.map((p) => <div key={p.id}><img src={p.image} alt={p.name} /></div>)}
</MozertSlider>

// Every Mozert option works as a prop (or inside options={{ ... }}).
// Each child renders one element. Give children a key.
// onInit(slider), onChange(index, slider); a ref gives { slider, element }.

npm install @mozert-studio/vue @mozert-studio/mozert-slider

// main.js
import '@mozert-studio/mozert-slider/css';
import '@mozert-studio/mozert-slider/theme.css';

<script setup>
import MozertSlider from '@mozert-studio/vue';
</script>

<template>
  <MozertSlider :slidesToShow="3" :spaceBetween="16" dots thumbs lightbox @change="(i) => console.log(i)">
    <div v-for="p in products" :key="p.id"><img :src="p.image" :alt="p.name" /></div>
  </MozertSlider>
</template>

<!-- Every Mozert option works as an attribute (camelCase) or inside :options="{ ... }".
     Events: init, change, before-change. -->

// Next.js (App Router): the file that uses the component starts with
'use client';

// Nuxt 3: render it on the client only
// <ClientOnly><MozertSlider :slidesToShow="3">...</MozertSlider></ClientOnly>

// Mozert touches the DOM, so it never runs during server rendering.
// The packages only create the slider after mount (useEffect / onVnodeMounted).

{{ 'mozert.min.css' | asset_url | stylesheet_tag }}
<div class="product-slider">
  {% for image in product.images %}
    <div><img src="{{ image | image_url: width: 900 }}" alt="{{ image.alt | escape }}" loading="lazy"></div>
  {% endfor %}
</div>
<script src="{{ 'mozert.min.js' | asset_url }}" defer></script>
<script>document.addEventListener('DOMContentLoaded', function(){ new Mozert('.product-slider', { dots: true }); });</script>

<!-- Hyvä (Alpine) -->
<div x-data x-init="new Mozert($refs.s, { slidesToShow: 4, spaceBetween: 16 })">
  <div x-ref="s"><?php foreach ($items as $item): ?><div><?= $item ?></div><?php endforeach ?></div>
</div>
<!-- Luma/RequireJS: add mozert.min.js to requirejs-config.js, then require(['mozert'], function (Mozert) {...}); -->

Verify

Open the console and run Mozert.version; it should print 1.1.1. Check Mozert.get(el) to get an instance back from an element.