Responsive without breakpoints
Most sliders look right on the screen they were designed on. Insigne adapts on its own and lets you add rules only where you want different behavior.
Height: zero config
With the default height: "auto" the slider looks at the first background image and picks a height from its ratio, kept within a range for the container size:
| Container width | Ratio range | Why |
|---|---|---|
| ≥ 1024 px | 1.6 – 2.6 (wide) | Cinematic on desktops |
| 640 – 1023 px | 1.25 – 1.8 | Tablets |
| < 640 px | 0.8 – 1.25 (close to portrait) | A wide photo is unreadable on a phone |
The result is clamped by minHeight (240 px) and maxHeight (92vh). Because smart fit keeps the focal point in frame, the taller phone crop still shows the subject.
Other height modes:
height | Behavior |
|---|---|
"auto" | As above. Without background images: the tallest slide. |
"image" | The exact ratio of each slide's background — nothing is cropped. The height animates between slides. |
"content" | The tallest slide's content. |
"fill" | Fills the element's own CSS height (height: 100vh, grid cells…). |
480 / "70vh" | A fixed height, any CSS length. |
aspect: "16/9" | A fixed ratio instead of the image's. |
<!-- height="image": every slide gets its own photo's ratio, nothing is cropped. -->
<insigne-slider height="image" effect="fade" pagination="fraction" pagination-placement="outside" max-height="80vh">
<div><img data-bg src="https://picsum.photos/id/1015/1500/1000" alt="Landscape 3:2"></div>
<div><img data-bg src="https://picsum.photos/id/64/900/1200" alt="Portrait 3:4"></div>
<div><img data-bg src="https://picsum.photos/id/1044/1600/900" alt="Wide 16:9"></div>
</insigne-slider>Columns: minSlideWidth
Instead of a breakpoint table, say how narrow a slide may get. The slider shows as many as fit:
<style>
.card { background: #fff; border: 1px solid #e2ded5; border-radius: 14px; overflow: hidden; }
.card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card div { padding: 14px 16px 16px; }
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card p { margin: 0; color: #6b6860; font-size: 14px; }
</style>
<!-- No breakpoints: as many 220px+ cards as fit the container. Resize the preview. -->
<insigne-slider min-slide-width="220" space-between="16" loop="off" height="content"
pagination="dots" pagination-placement="outside" arrows="visible">
<article class="card"><img src="https://picsum.photos/id/1025/600/450" alt="Pug"><div><h3>Pug</h3><p>Loves blankets</p></div></article>
<article class="card"><img src="https://picsum.photos/id/1074/600/450" alt="Lioness"><div><h3>Lioness</h3><p>Watching closely</p></div></article>
<article class="card"><img src="https://picsum.photos/id/1084/600/450" alt="Walruses"><div><h3>Walruses</h3><p>Beach day</p></div></article>
<article class="card"><img src="https://picsum.photos/id/1069/600/450" alt="Jellyfish"><div><h3>Jellyfish</h3><p>Drifting</p></div></article>
<article class="card"><img src="https://picsum.photos/id/1080/600/450" alt="Strawberries"><div><h3>Berries</h3><p>Fresh picked</p></div></article>
<article class="card"><img src="https://picsum.photos/id/1050/600/450" alt="Sea"><div><h3>Sea</h3><p>Calm water</p></div></article>
</insigne-slider>Breakpoints, by container
When you do want different settings per size, breakpoints keys are minimum widths of the slider, not the window. A slider in a sidebar and the same slider full-width behave correctly without media queries.
<!-- Breakpoints use the slider's own width, not the window. -->
<insigne-slider effect="slide" slides-per-view="1.15" space-between="12" centered height="280"
breakpoints='{"560":{"slidesPerView":2,"centered":false},"860":{"slidesPerView":3,"spaceBetween":20},"1100":{"effect":"coverflow","slidesPerView":3,"centered":true}}'>
<div><img data-bg src="https://picsum.photos/id/1018/900/700" alt="Mountains"></div>
<div><img data-bg src="https://picsum.photos/id/1036/900/700" alt="Snow"></div>
<div><img data-bg src="https://picsum.photos/id/1043/900/700" alt="City"></div>
<div><img data-bg src="https://picsum.photos/id/1050/900/700" alt="Sea"></div>
<div><img data-bg src="https://picsum.photos/id/823/900/700" alt="Forest"></div>
<div><img data-bg src="https://picsum.photos/id/1039/900/700" alt="Waterfall"></div>
</insigne-slider>Any option can change in a breakpoint — even effect.
Text that scales
Slides are normal HTML, so use the tools you already know. Container units make text follow the slider, not the window:
insigne-slider { container-type: inline-size; }
.slide-title { font-size: clamp(28px, 6cqi, 72px); }