Every demo below is the real library running on this page. Open Code to copy the options.
The classic. Pauses on hover and focus, respects prefers-reduced-motion.
new Mozert('#slider', {
"dots": true,
"autoplay": true,
"autoplaySpeed": 3500
});slidesToShow: 2.4 peeks the next card; spaceBetween replaces margin hacks. Breakpoints can be max-width (default) or min-width with mobileFirst.
new Mozert('#slider', {
"slidesToShow": 2.4,
"spaceBetween": 16,
"infinite": false,
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.3
}
}
]
});The first slide lines up with the page content, the rest run off the right edge of the screen. As you scroll, slides leave through the left edge, and the last slide stops at the content edge.
new Mozert('#slider', {
"bleed": true,
"slidesToShow": 2.6,
"spaceBetween": 16,
"infinite": false,
"dots": false,
"responsive": [
{
"breakpoint": 700,
"settings": {
"slidesToShow": 1.4
}
}
]
});Active slide centred, neighbours peek. centerPadding sets the peek width.
new Mozert('#slider', {
"centerMode": true,
"centerPadding": "80px",
"slidesToShow": 1,
"spaceBetween": 16,
"dots": true,
"responsive": [
{
"breakpoint": 640,
"settings": {
"centerPadding": "32px"
}
}
]
});Centred 3D coverflow with rotate, depth and stretch options. Works with loop, drag and keyboard.
new Mozert('#slider', {
"effect": "coverflow",
"slidesToShow": 3,
"infinite": true,
"speed": 600,
"cssEase": "cubic-bezier(.25,.8,.25,1)",
"coverflowEffect": {
"rotate": 40,
"depth": 140,
"modifier": 1
}
});Coverflow with lift and fade: the active card is large, neighbours turn away, and cards further back rise and fade. Drag, click a card, or use the arrows.
new Mozert('#slider', {
"effect": "coverflow",
"centerMode": true,
"slidesToShow": 3.4,
"spaceBetween": 0,
"infinite": true,
"speed": 650,
"cssEase": "cubic-bezier(.25,.8,.25,1)",
"focusOnSelect": true,
"dots": false,
"coverflowEffect": {
"rotate": 34,
"depth": 200,
"scale": 0.8,
"lift": 70,
"fade": 0.14,
"modifier": 1
},
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.7,
"arrows": false
}
}
]
});effect: "expand". The active card opens wide while the others stay narrow, and the stage colour follows the active card. Drag, click a card or use the arrows.
new Mozert('#slider', {
"effect": "expand",
"slidesToShow": 4.4,
"spaceBetween": 14,
"infinite": true,
"speed": 650,
"cssEase": "cubic-bezier(.25,.8,.25,1)",
"focusOnSelect": true,
"dots": false,
"expandEffect": {
"extra": 1.25
},
"responsive": [
{
"breakpoint": 900,
"settings": {
"slidesToShow": 3.2,
"expandEffect": {
"extra": 1.1
}
}
},
{
"breakpoint": 640,
"settings": {
"slidesToShow": 2.3,
"arrows": false,
"expandEffect": {
"extra": 1
}
}
}
]
});One option builds the thumbnail strip, highlights the active one and keeps both in sync. Pass a selector (thumbs: "#nav") to use your own strip, or { count: 4 } to change how many show. The magnifier button (top right of the picture, magnifier: true) turns on hover zoom: move the mouse over the picture to magnify it.
new Mozert('#slider', {
"thumbs": {
"count": 4
},
"magnifier": true,
"slidesToShow": 1,
"dots": false
});thumbs: { position: "right", count: 4 }. The strip stands beside the main picture, and its thumbnails always fill the same height. Use position: "left" to flip it.
new Mozert('#slider', {
"thumbs": {
"position": "right",
"count": 4
},
"slidesToShow": 1,
"dots": false
});thumbs: { position: "left" } with magnifier: true, like a shop product page. Turn on the magnifier button, then move the mouse over the picture to zoom into the detail. On phones the strip drops below the picture.
new Mozert('#slider', {
"thumbs": {
"position": "left",
"count": 4
},
"magnifier": {
"zoom": 2.4
},
"slidesToShow": 1,
"dots": false,
"arrows": false
});lightbox: true. Next and previous, arrow keys, swipe, click the picture to zoom, Esc to close. With real images it opens the big version (data-full or a link to the file) and shows data-caption.
new Mozert('#slider', {
"lightbox": true,
"slidesToShow": 3,
"spaceBetween": 14,
"dots": true,
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.4
}
}
]
});scrollDriven: true. Scroll down: the slider fills the screen and sticks while the slides move sideways with your scroll, then the page carries on.
new Mozert('#slider', {
"scrollDriven": {
"fill": true,
"offset": 76,
"bottom": 24,
"speed": 2.4
},
"slidesToShow": 1.5,
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.15
}
}
],
"spaceBetween": 16,
"infinite": false,
"arrows": false,
"dots": false,
"draggable": false
});prevArrow and nextArrow take your own markup. appendArrows and appendDots move the arrows and dots into any element, here a control bar under the slider.
new Mozert('#slider', {
"slidesToShow": 2.2,
"spaceBetween": 16,
"arrows": true,
"dots": true,
"prevArrow": "<button type=\"button\" class=\"mz-arr\">← Prev</button>",
"nextArrow": "<button type=\"button\" class=\"mz-arr\">Next →</button>",
"appendArrows": "#arrows-bar-a",
"appendDots": "#arrows-bar-d",
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.2
}
}
]
});centerMode with centerPadding: "140px" shows a big slice of the neighbours; the responsive setting shrinks it to 36px on phones.
new Mozert('#slider', {
"centerMode": true,
"centerPadding": "140px",
"slidesToShow": 1,
"spaceBetween": 14,
"dots": true,
"responsive": [
{
"breakpoint": 640,
"settings": {
"centerPadding": "36px"
}
}
]
});rtl: true starts from the right, reverses the swipe and arrow directions and the keyboard arrows. Use it for Arabic, Hebrew and Urdu pages.
new Mozert('#slider', {
"rtl": true,
"slidesToShow": 2.2,
"spaceBetween": 16,
"dots": true,
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.2
}
}
]
});A real 3D cube that follows your finger while dragging.
new Mozert('#slider', {
"effect": "cube",
"pagination": {
"type": "bullets"
},
"speed": 600
});Slides flip around the Y axis. Drag to scrub through the flip.
new Mozert('#slider', {
"effect": "flip",
"pagination": {
"type": "bullets"
},
"speed": 600
});A swipeable stack: drag the top card away to reveal the next.
new Mozert('#slider', {
"effect": "cards",
"arrows": false,
"cardsEffect": {
"perSlideOffset": 12,
"perSlideRotate": 3
}
});Describe how previous and next slides translate, rotate, scale and fade. Everything else is interpolated for you.
new Mozert('#slider', {
"effect": "creative",
"speed": 700,
"creativeEffect": {
"prev": {
"translate": [
"-40%",
0,
-300
],
"rotate": [
0,
0,
-8
],
"opacity": 0
},
"next": {
"translate": [
"100%",
0,
0
]
}
}
});Cross-fade plus a progress bar that follows the slider. Autoplay emits autoplayTimeLeft if you want your own timer UI.
new Mozert('#slider', {
"fade": true,
"autoplay": true,
"autoplaySpeed": 2800,
"pagination": {
"type": "progressbar"
},
"arrows": false
});Momentum scrolling that stops anywhere. Try dragging fast, using the mouse wheel, or dragging the scrollbar.
new Mozert('#slider', {
"freeMode": true,
"mousewheel": true,
"scrollbar": {
"draggable": true
},
"slidesToShow": 3.2,
"spaceBetween": 12,
"infinite": false,
"arrows": false,
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 1.8
}
}
]
});Also available: bullets, dynamic bullets, progressbar and custom renderers.
new Mozert('#slider', {
"pagination": {
"type": "fraction"
}
});Only the bullets around the active slide are shown at full size.
new Mozert('#slider', {
"pagination": {
"type": "dynamic",
"clickable": true
}
});Set vertical: true. Drag, keys and wheel follow the vertical axis.
new Mozert('#slider', {
"vertical": true,
"slidesToShow": 2,
"spaceBetween": 12,
"mousewheel": true,
"dots": true
});Add data-parallax-x / -y / -scale / -opacity to any element inside a slide. Here the background, label, number and caption each travel at a different speed while you drag or click.
new Mozert('#slider', {
"parallax": true,
"speed": 900,
"dots": true
});slider.add(html, index, addBefore) and slider.remove(index) rebuild the layout and keep the current slide. Try it.
const slider = new Mozert('#slider', { slidesToShow: 3, infinite: false });
slider.add('<div>New slide</div>'); // append
slider.add('<div>First</div>', true); // prepend
slider.add('<div>After #2</div>', 1); // after index 1
slider.remove(slider.slideCount() - 1); // remove last
slider.removeAll(); // clearslider.filter(selector) shows only matching slides, slider.unfilter() brings everything back. A function works too.
const slider = new Mozert('#slider', { slidesToShow: 2.4, infinite: false });
slider.filter('.cat-a'); // selector
slider.filter((el, i) => i % 2 === 0); // or a function
slider.unfilter(); // show allDouble-click (or double-tap) an image. While zoomed, drag pans the image instead of changing slides.
new Mozert('#slider', {
"zoom": {
"max": 3
},
"dots": true
});Only the slides near the viewport hold content. Jump around with the dots or arrows.
const slides = Array.from({ length: 2000 }, (_, i) => '<div>Slide ' + (i + 1) + '</div>');
new Mozert('#slider', {
virtual: { slides, addSlidesBefore: 2, addSlidesAfter: 3 },
slidesToShow: 3, spaceBetween: 12, infinite: false
});Continuous logo strip. Pauses on hover, stops entirely for reduced-motion users.
new Mozert('#slider', {
"marquee": {
"speed": 70
},
"slidesToShow": 4,
"spaceBetween": 14,
"responsive": [
{
"breakpoint": 640,
"settings": {
"slidesToShow": 2.5
}
}
]
});Two sliders that drive each other. Click a thumbnail or swipe the main image.
new Mozert('#main', { fade: true, asNavFor: '#nav' });
new Mozert('#nav', { slidesToShow: 4, spaceBetween: 10, asNavFor: '#main', focusOnSelect: true, infinite: false });