Build a hero slider with parallax and a progress bar
Full-width banners that feel alive without a heavy library.
<div class="hero" data-mozert='{"parallax":true,"fade":true,"autoplay":true,"autoplaySpeed":5000,"arrows":false,"pagination":{"type":"progressbar"}}'>
<div><img src="a.jpg" alt=""><h2 data-parallax-x="-40%">Summer sale</h2></div>
<div><img src="b.jpg" alt=""><h2 data-parallax-x="-40%">New arrivals</h2></div>
</div>
Elements with data-parallax-x move at a different speed than the slide, which gives the depth. The progress bar follows the autoplay timer. Autoplay stops for visitors who prefer reduced motion.
Making a carousel accessible
What Mozert does for you and what is left to you.
Mozert adds the carousel role, labelled slides, keyboard arrows, focus handling and a live region that goes quiet while autoplay runs. Your part: write real alt text, keep controls visible against the images, and translate the built-in strings with the labels option.
new Mozert('.slider', {
labels: { next: 'Suivant', prev: 'Précédent' },
pauseOnFocus: true,
autoplay: true
});
Build a coverflow product gallery
A centred, 3D gallery that adapts to mobile.
new Mozert('.gallery', {
effect: 'coverflow',
slidesToShow: 3,
infinite: true,
coverflowEffect: { rotate: 35, depth: 160, modifier: 1 },
pagination: { type: 'dynamic' },
responsive: [{ breakpoint: 640, settings: { slidesToShow: 1.6 } }]
});
Coverflow forces centerMode. Use depth for how far side slides recede and rotate for the angle. On narrow screens show fewer slides so the centre image stays large.
Render 10,000 slides without freezing the page
Virtual slides keep the DOM small.
const items = await (await fetch('/api/products')).json();
const slider = new Mozert('#catalog', {
virtual: {
slides: items,
renderSlide: (p) => '<article><img data-lazy="' + p.img + '" alt=""><h3>' + p.name + '</h3></article>',
addSlidesBefore: 3, addSlidesAfter: 4, cache: false
},
slidesToShow: 4, spaceBetween: 16
});
Mozert creates 10,000 empty shells (cheap) and fills the few near the viewport. Combine with data-lazy for images and with freeMode for a smooth scrolling feel.
How to add Mozert Slider to React, Next.js and Vue
Install the official package, import the CSS, and use it as a component.
1. Install
npm install @mozert-studio/react @mozert-studio/mozert-slider
For Vue 3 use @mozert-studio/vue instead.
2. Import the styles once
import '@mozert-studio/mozert-slider/css';
import '@mozert-studio/mozert-slider/theme.css';
3. Use it
import MozertSlider from '@mozert-studio/react';
<MozertSlider slidesToShow={3} spaceBetween={16} dots lightbox thumbs>
{products.map(p => <div key={p.id}><img src={p.image} alt={p.name} /></div>)}
</MozertSlider>
Every Mozert option works as a prop. Give each child a key; the slider rebuilds itself when slides are added, removed or reordered.
Next.js
Add 'use client' as the first line of the file that uses the component. The slider only runs in the browser, so server rendering is safe.
Vue 3 and Nuxt
<MozertSlider :slidesToShow="3" dots @change="i => current = i">
<div v-for="p in products" :key="p.id">{{ p.name }}</div>
</MozertSlider>
In Nuxt wrap it in <ClientOnly>.
Calling methods
React: ref.current.slider.next(). Vue: ref.value.slider().goTo(2). Or keep the instance from onInit / the init event.
Using Mozert in Shopify and Magento themes
Plain script tags, no build step.
In Shopify, upload mozert.min.js and mozert.min.css to assets, include them with asset_url and initialise after DOMContentLoaded. In Magento 2 with Hyvä, initialise from an Alpine x-init; with Luma, register the file in requirejs-config.js. The installation page has copy-paste snippets for both.
