Options
Every option works the same way in all three APIs. In HTML, write it in kebab-case: slidesPerView → slides-per-view on <insigne-slider>, or data-slides-per-view on a [data-insigne] element. Objects (like breakpoints) are written as JSON.
<insigne-slider effect="fade" slides-per-view="1" autoplay="5000" breakpoints='{"768":{"effect":"slide"}}'>
<div data-insigne data-effect="fade" data-autoplay="5000">new InsigneSlider(el, { effect: 'fade', autoplay: 5000 })Swiper-style names are accepted as aliases: gap, centeredSlides, initialSlide, navigation, disableOnInteraction, autoHeight, perView, delay.
80 options
Layout
effecteffectenumDefault "slide"Transition between slides. CSS effects work everywhere; WebGL effects (heat-haze, ripple, liquid…) load on demand and fall back to a matching CSS effect when WebGL or CORS is unavailable.
slidefadecubecoverflowflipcardscreativestackzoomblurrotateparallaxwarpproductsketchuncoverglitchwipecurtainirisdiagonalblindssplitshutterboxesdiamondclockheat-hazerippleliquidrgb-glitchpixel-dissolvezoom-blurswirlpage-curlinkgod-rayswarp-speedwaterluma-morphrandom-glslidesPerViewslides-per-viewnumber|enumDefault 1Range 1 … 12Slides visible at once (fractions allowed, e.g. 1.2 to peek the next one). "auto" uses each slide's own width.
autominSlideWidthmin-slide-widthnumberDefault 0Range 0 … 2000Responsive columns without breakpoints: as many slides as fit at this minimum width (px). 0 = off.
heightheightnumber|stringDefault "auto""auto" (aspect / image ratio, zero config), "image" (exact ratio of each background — nothing is cropped), "content" (tallest slide), "fill" (the element's own CSS height), a number in px or any CSS length (e.g. "80vh").
aspectaspectnumber|stringDefault "auto"Aspect ratio used by height "auto": "auto" picks a ratio per container width (wide on desktop, taller on phones) from the first background image, or e.g. "16/9", 2.4.
minHeightmin-heightnumber|stringDefault 240Lower bound for computed heights (px or CSS length).
maxHeightmax-heightnumber|stringDefault "92vh"Upper bound for computed heights (px or CSS length, vh is resolved against the window).
breakpointsbreakpointsobjectDefault {}Overrides by container width: { 640: { slidesPerView: 2 }, 1024: { slidesPerView: 3 } }. Keys are min-widths of the slider itself, not the window.
startIndexstart-indexnumberDefault 0Range 0 … ∞Slide shown first (0-based). The URL hash #slide-3 also works when hash is on.
rtlrtlenum|booleanDefault "auto"Right-to-left. "auto" follows the dir attribute of the page.
autoMotion & effects
easeeaseenumDefault "auto"Easing of programmatic moves. "auto" picks one per effect. Dragging always follows the finger and releases with its momentum.
autolinearsine.inOutpower2.inOutpower3.outpower4.outexpo.outexpo.inOutcirc.outback.outlooploopenum|booleanDefault "loop""loop" (endless, no cloned slides), "rewind" (jump back to the start) or "off". true/false are accepted.
looprewindoffparallaxparallaxbooleanDefault trueAnimate elements with data-parallax / data-parallax-opacity / data-parallax-scale as slides move.
scrollDrivescroll-drivebooleanDefault falsePage scroll drives the slider (scroll-telling). Loaded on demand.
slideShadowsslide-shadowsbooleanDefault trueDepth shading on 3D effects (cube, flip, coverflow, cards, stack).
coverflowRotatecoverflow-rotatenumberDefault 40Range 0 … 80Coverflow: rotation of side slides (deg).
coverflowDepthcoverflow-depthnumberDefault 160Range 0 … 600Coverflow: depth of side slides (px).
coverflowStretchcoverflow-stretchnumberDefault 0Range -100 … 100Coverflow: extra spacing of side slides (px).
creativecreativeobjectDefault {"prev":{"translate":["-22%",0,-320],"…Effect "creative": transforms of the previous / next slide ({ translate: [x, y, z], rotate: [x, y, z], scale, opacity }).
shaderIntensityshader-intensitynumberDefault 1Range 0 … 2WebGL effects: strength of the distortion.
shaderAngleshader-anglenumberDefault 0Range -180 … 180WebGL effects: direction (deg) for directional transitions.
shaderOriginshader-originenumDefault "pointer"WebGL effects: where radial transitions start (the click / pointer, the center or shaderOriginX/Y).
pointercentercustomgpugpuenumDefault "auto"WebGL policy. "auto" skips WebGL on low-power devices and data saver.
autoprefer-webglcss-onlyAutoplay
autoplayautoplayboolean|numberDefault falseAdvance automatically. A number is the delay in ms (same as autoplay: true + autoplayDelay).
pauseOnHoverpause-on-hoverbooleanDefault truePause while the pointer is over the slider (and while it has keyboard focus).
stopOnInteractionstop-on-interactionbooleanDefault falseStop autoplay for good after the user swipes, clicks an arrow or a dot.
autoplayProgressautoplay-progressbooleanDefault trueProgress ring that doubles as a pause / play button (WCAG 2.2.2).
Interaction
dragdragbooleanDefault trueSwipe with touch, pen or mouse. Every effect follows the finger, including 3D and masks.
keyboardkeyboardbooleanDefault trueArrow keys, PageUp/PageDown, Home/End while the slider has focus.
mousewheelmousewheelbooleanDefault falseNavigate with the mouse wheel / trackpad (the page scrolls on at the ends).
hashhashbooleanDefault falseSync the active slide with the URL hash (#slider-id-3), for deep links.
Navigation
arrowsarrowsenum|booleanDefault "hover"Previous / next buttons. "hover" shows them on pointer devices on hover and always on touch.
hovervisiblehiddenarrowsPlacementarrows-placementenumDefault "inside"Arrows over the slides or outside them.
insideoutsidearrowsPositionarrows-positionenumDefault "sides"Where the arrows sit.
sidesbottom-leftbottom-centerbottom-righttop-rightarrowSizearrow-sizenumberDefault 44Range 24 … 96Arrow button size (px). 44 meets touch target guidelines.
paginationpaginationenum|booleanDefault "dots"Dots (dynamic beyond 7 slides), "03 / 12" fraction, a progress bar or none.
dotsfractionprogressnonepaginationPlacementpagination-placementenumDefault "inside"Pagination over the slides or below them.
insideoutsidethumbsthumbsstringDefault ""CSS selector of another slider that acts as this one's thumbnails (synced both ways).
Images
fitfitenumDefault "smart"How background images fill the slide. "smart" covers like "cover" but never cuts the focus point or the safe area: if they would be cut it zooms out and fills the gap with a blurred copy.
smartcovercontainfocusfocusstringDefault "50% 50%"Default focal point of background images ("x% y%"). Per image: data-focus.
safesafestringDefault ""Default safe area that must always stay visible: "left top width height" in % of the image, e.g. "30 10 40 80". Per image: data-safe.
backdropbackdropstringDefault "blur"What fills the space around a zoomed-out image: "blur" (blurred copy), "none", or any CSS color.
kenBurnsken-burnsenum|booleanDefault falseSlow zoom / pan of the background on the active slide, centered on the focus point. true = "zoom-out". Per slide: data-ken-burns.
zoom-inzoom-outpan-leftpan-rightpan-uppan-downdiagonalalternatelazylazybooleanDefault trueLoad images of slides out of view only when they are about to be shown.
Layers
layerslayersbooleanDefault trueAnimate elements with data-in (entrance), data-out (exit), data-loop and data-hover when their slide becomes active. Loaded on demand.
layerInlayer-instringDefault ""Default entrance recipe for elements with an empty data-in, and for headings / paragraphs / buttons when "auto".
layerOutlayer-outstringDefault "reverse"Default exit: "reverse" (the entrance backwards, faster), an exit recipe (fade, up, down, left, blur) or "none".
layerSpeedlayer-speednumberDefault 1Range 0.2 … 4Multiplier for all layer timings (>1 = slower).
imageInimage-instringDefault "none"Image recipe for the background of the entering slide (develop, focus, spotlight, rise, tint, flicker, depth-zoom, breathe).
recipesrecipesobjectDefault {}Your own recipes, merged over the built-in ones: { "my-rise": { split: "words", stagger: 40, in: [{ o: 0, y: 30 }, { o: 1, y: 0, d: 700, e: "expo.out" }] } }.
Atmosphere
overlayoverlayenumDefault "none"Animated light / texture over the slides (beams, rays, light-leak, grain, letterbox, vignette, scanlines, fog).
nonebeamsrayslight-leakgrainletterboxvignettescanlinesfogparticlesparticlesenumDefault "none"Canvas particle field (stars, warp, dust, snow, embers, bokeh, fireflies, bubbles). Loaded on demand, paused offscreen.
nonestarswarpdustsnowembersbokehfirefliesbubblesscrollDepthscroll-depthnumberDefault 0Range 0 … 1Scroll parallax: while the page scrolls, backgrounds and text move at different speeds (0 = off, 1 = strong).
Accessibility
labellabelstringDefault ""Accessible name of the slider (aria-label). Defaults to the aria-label of the element.
localelocalestringDefault "auto"Language of the built-in labels: "auto" (page lang), "en", "tr".
i18ni18nobjectDefault {}Override any label: { prev, next, goTo, slide, pause, play, carousel, slideRole }.
reducedMotionreduced-motionenumDefault "auto""auto" follows prefers-reduced-motion: 3D / WebGL become fade, layers appear without motion, autoplay is off.
autoalwaysneverpauseOffscreenpause-offscreenbooleanDefault truePause autoplay, WebGL, particles and layer loops while the slider is out of view or the tab is hidden.
Attribution
creditcreditenumDefault "below"Attribution required by the license: "below" the slider (default), "inside" as a small badge, or "page" when your page already shows a visible link to sadiksefa.dev or sadiksefa.com.tr (e.g. in the footer).
belowinsidepagecreditThemecredit-themeenumDefault "auto"Credit colors. "auto" reads the page background.
autolightdarklicenselicensestringDefault ""Domain license key that removes the attribution requirement for the domains it was issued for.