mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-11 01:39:11 +00:00
3533 lines
317 KiB
HTML
3533 lines
317 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-layout="component" data-shoelace-version="0.0.10">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta
|
||
name="description"
|
||
content="Carousels display an arbitrary number of content slides along a horizontal or vertical axis."
|
||
/>
|
||
<title>Carousel</title>
|
||
|
||
<meta name="turbo-cache-control" />
|
||
|
||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
|
||
<link rel="stylesheet" href="/assets/styles/search.css" />
|
||
|
||
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
|
||
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta name="twitter:creator" content="shoelace_style" />
|
||
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<meta property="og:url" content="https://nebulaui.org/components/carousel/" />
|
||
<meta property="og:title" content="Carousel" />
|
||
<meta
|
||
property="og:description"
|
||
content="Carousels display an arbitrary number of content slides along a horizontal or vertical axis."
|
||
/>
|
||
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
|
||
|
||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||
|
||
<script>
|
||
(() => {
|
||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
const theme = localStorage.getItem('theme') || 'auto';
|
||
document.documentElement.classList.toggle(
|
||
'sl-theme-dark',
|
||
theme === 'dark' || (theme === 'auto' && prefersDark)
|
||
);
|
||
})();
|
||
</script>
|
||
|
||
<script src="/assets/scripts/turbo.js" type="module"></script>
|
||
<script src="/assets/scripts/docs.js" defer=""></script>
|
||
<script src="/assets/scripts/code-previews.js" defer=""></script>
|
||
<script src="/assets/scripts/lunr.js" defer=""></script>
|
||
<script src="/assets/scripts/search.js" defer=""></script>
|
||
</head>
|
||
<body>
|
||
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
|
||
Skip to main content
|
||
</a>
|
||
|
||
<button id="menu-toggle" type="button" aria-label="Menu">
|
||
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
||
</g>
|
||
</svg>
|
||
</button>
|
||
|
||
<div id="icon-toolbar">
|
||
<a
|
||
href="https://github.com/onsonr/nebula"
|
||
title="View Nebula on GitHub"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="github"></sl-icon>
|
||
</a>
|
||
|
||
<a
|
||
href="https://twitter.com/shoelace_style"
|
||
title="Follow Nebula on Twitter"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<sl-icon name="twitter"></sl-icon>
|
||
</a>
|
||
|
||
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
||
<sl-button slot="trigger" size="small" variant="text" caret="" title="Press \ to toggle">
|
||
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
||
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
||
</sl-button>
|
||
<sl-menu>
|
||
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
||
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
||
<sl-divider></sl-divider>
|
||
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
||
</sl-menu>
|
||
</sl-dropdown>
|
||
</div>
|
||
|
||
<aside id="sidebar" data-preserve-scroll="">
|
||
<header>
|
||
<a href="/">
|
||
<img src="/assets/images/wordmark.svg" alt="Nebula" />
|
||
</a>
|
||
<div class="sidebar-version">0.0.10</div>
|
||
</header>
|
||
|
||
<div class="sidebar-buttons">
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--github"
|
||
href="https://github.com/onsonr/nebula"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--star"
|
||
href="https://github.com/onsonr/nebula/stargazers"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
||
</sl-button>
|
||
<sl-button
|
||
size="small"
|
||
class="repo-button repo-button--twitter"
|
||
href="https://twitter.com/shoelace_style"
|
||
target="_blank"
|
||
>
|
||
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
||
</sl-button>
|
||
</div>
|
||
|
||
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
||
<sl-icon name="search"></sl-icon>
|
||
<span>Search</span>
|
||
</button>
|
||
|
||
<nav>
|
||
<ul>
|
||
<li>
|
||
<h2>Getting Started</h2>
|
||
<ul>
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="/getting-started/installation">Installation</a></li>
|
||
<li><a href="/getting-started/usage">Usage</a></li>
|
||
<li><a href="/getting-started/themes">Themes</a></li>
|
||
<li><a href="/getting-started/customizing">Customizing</a></li>
|
||
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
||
<li><a href="/getting-started/localization">Localization</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Frameworks</h2>
|
||
<ul>
|
||
<li><a href="/frameworks/react">React</a></li>
|
||
<li><a href="/frameworks/vue">Vue</a></li>
|
||
<li><a href="/frameworks/angular">Angular</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Resources</h2>
|
||
<ul>
|
||
<li><a href="/resources/community">Community</a></li>
|
||
<li>
|
||
<a
|
||
href="https://github.com/onsonr/nebula/discussions"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>Help & Support</a
|
||
>
|
||
</li>
|
||
<li><a href="/resources/accessibility">Accessibility</a></li>
|
||
<li><a href="/resources/contributing">Contributing</a></li>
|
||
<li><a href="/resources/changelog">Changelog</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Components</h2>
|
||
<ul>
|
||
<li>
|
||
<a href="/components/alert"> Alert </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animated-image"> Animated Image </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/animation"> Animation </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/avatar"> Avatar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/badge"> Badge </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb"> Breadcrumb </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button"> Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/button-group"> Button Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/card"> Card </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel" class="active-link"> Carousel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/carousel-item"> Carousel Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/checkbox"> Checkbox </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/color-picker"> Color Picker </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/copy-button"> Copy Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/details"> Details </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dialog"> Dialog </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/divider"> Divider </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/drawer"> Drawer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/dropdown"> Dropdown </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-bytes"> Format Bytes </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-date"> Format Date </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/format-number"> Format Number </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon"> Icon </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/icon-button"> Icon Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/image-comparer"> Image Comparer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/include"> Include </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/input"> Input </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu"> Menu </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-item"> Menu Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/menu-label"> Menu Label </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/mutation-observer"> Mutation Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/option"> Option </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/popup"> Popup </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-bar"> Progress Bar </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/progress-ring"> Progress Ring </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/qr-code"> QR Code </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio"> Radio </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-button"> Radio Button </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/radio-group"> Radio Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/range"> Range </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/rating"> Rating </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/relative-time"> Relative Time </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/resize-observer"> Resize Observer </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/select"> Select </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/skeleton"> Skeleton </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/spinner"> Spinner </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/split-panel"> Split Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/switch"> Switch </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab"> Tab </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-group"> Tab Group </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tab-panel"> Tab Panel </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tag"> Tag </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/textarea"> Textarea </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tooltip"> Tooltip </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree"> Tree </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/tree-item"> Tree Item </a>
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/components/visually-hidden"> Visually Hidden </a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Design Tokens</h2>
|
||
<ul>
|
||
<li><a href="/tokens/typography">Typography</a></li>
|
||
<li><a href="/tokens/color">Color</a></li>
|
||
<li><a href="/tokens/spacing">Spacing</a></li>
|
||
<li><a href="/tokens/elevation">Elevation</a></li>
|
||
<li><a href="/tokens/border-radius">Border Radius</a></li>
|
||
<li><a href="/tokens/transition">Transition</a></li>
|
||
<li><a href="/tokens/z-index">Z-index</a></li>
|
||
<li><a href="/tokens/more">More Tokens</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<h2>Tutorials</h2>
|
||
<ul>
|
||
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
|
||
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
||
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
||
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<main>
|
||
<a id="main-content"></a>
|
||
<article id="content" class="content content--with-toc">
|
||
<div class="content__toc">
|
||
<ul>
|
||
<li class="top"><a href="#">Carousel</a></li>
|
||
<li data-level="2"><a href="#examples">Examples</a></li>
|
||
<li data-level="3"><a href="#pagination">Pagination</a></li>
|
||
<li data-level="3"><a href="#navigation">Navigation</a></li>
|
||
<li data-level="3"><a href="#looping">Looping</a></li>
|
||
<li data-level="3"><a href="#autoplay">Autoplay</a></li>
|
||
<li data-level="3"><a href="#mouse-dragging">Mouse Dragging</a></li>
|
||
<li data-level="3"><a href="#multiple-slides-per-view">Multiple Slides Per View</a></li>
|
||
<li data-level="3"><a href="#adding-and-removing-slides">Adding and Removing Slides</a></li>
|
||
<li data-level="3"><a href="#vertical-scrolling">Vertical Scrolling</a></li>
|
||
<li data-level="3"><a href="#aspect-ratio">Aspect Ratio</a></li>
|
||
<li data-level="3"><a href="#scroll-hint">Scroll Hint</a></li>
|
||
<li data-level="3"><a href="#gallery-example">Gallery Example</a></li>
|
||
<li data-level="2"><a href="#importing">Importing</a></li>
|
||
<li data-level="2"><a href="#slots">Slots</a></li>
|
||
<li data-level="2"><a href="#properties">Properties</a></li>
|
||
<li data-level="2"><a href="#events">Events</a></li>
|
||
<li data-level="2"><a href="#methods">Methods</a></li>
|
||
<li data-level="2"><a href="#custom-properties">Custom Properties</a></li>
|
||
<li data-level="2"><a href="#parts">Parts</a></li>
|
||
<li data-level="2"><a href="#dependencies">Dependencies</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content__body">
|
||
<header class="component-header">
|
||
<h1>Carousel</h1>
|
||
|
||
<div class="component-header__tag">
|
||
<code><sl-carousel> | SlCarousel</code>
|
||
</div>
|
||
|
||
<div class="component-header__info">
|
||
<sl-badge variant="neutral" pill=""> Since 2.2 </sl-badge>
|
||
<sl-badge variant="warning" pill="" style="text-transform: capitalize"> experimental </sl-badge>
|
||
</div>
|
||
</header>
|
||
|
||
<p class="component-summary">
|
||
Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel pagination="" navigation="" mouse-dragging="" loop="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-72">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-317"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span> <span class="token attr-name">mouse-dragging</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-317"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-318"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">mouse-dragging</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-318"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-72"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="examples" class="anchor-heading">
|
||
Examples<a href="#examples" aria-label='Direct link to "Examples"'></a>
|
||
</h2>
|
||
<h3 id="pagination" class="anchor-heading">
|
||
Pagination<a href="#pagination" aria-label='Direct link to "Pagination"'></a>
|
||
</h3>
|
||
<p>
|
||
Use the <code>pagination</code> attribute to show the total number of slides and the current slide as a set
|
||
of interactive dots.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel pagination="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-73">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-319"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-319"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-320"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-320"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-73"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="navigation" class="anchor-heading">
|
||
Navigation<a href="#navigation" aria-label='Direct link to "Navigation"'></a>
|
||
</h3>
|
||
<p>Use the <code>navigation</code> attribute to show previous and next buttons.</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel navigation="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-74">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-321"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-321"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-322"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-322"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-74"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="looping" class="anchor-heading">
|
||
Looping<a href="#looping" aria-label='Direct link to "Looping"'></a>
|
||
</h3>
|
||
<p>
|
||
By default, the carousel will not advanced beyond the first and last slides. You can change this behavior
|
||
and force the carousel to “wrap” with the <code>loop</code> attribute.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel loop="" navigation="" pagination="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-75">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-323"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">loop</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-323"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-324"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">loop</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-324"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-75"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="autoplay" class="anchor-heading">
|
||
Autoplay<a href="#autoplay" aria-label='Direct link to "Autoplay"'></a>
|
||
</h3>
|
||
<p>
|
||
The carousel will automatically advance when the <code>autoplay</code> attribute is used. To change how long
|
||
a slide is shown before advancing, set <code>autoplay-interval</code> to the desired number of milliseconds.
|
||
For best results, use the <code>loop</code> attribute when autoplay is enabled. Note that autoplay will
|
||
pause while the user interacts with the carousel.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel autoplay="" loop="" pagination="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-76">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-325"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">loop</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-325"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-326"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">autoplay</span> <span class="token attr-name">loop</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-326"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-76"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="mouse-dragging" class="anchor-heading">
|
||
Mouse Dragging<a href="#mouse-dragging" aria-label='Direct link to "Mouse Dragging"'></a>
|
||
</h3>
|
||
<p>
|
||
The carousel uses
|
||
<a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>scroll snap</a
|
||
>
|
||
to position slides at various snap positions. This allows users to scroll through the slides very naturally,
|
||
especially on touch devices. Unfortunately, desktop users won’t be able to click and drag with a mouse,
|
||
which can feel unnatural. Adding the <code>mouse-dragging</code> attribute can help with this.
|
||
</p>
|
||
<p>
|
||
This example is best demonstrated using a mouse. Try clicking and dragging the slide to move it. Then toggle
|
||
the switch and try again.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<div class="mouse-dragging">
|
||
<sl-carousel pagination="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<sl-divider></sl-divider>
|
||
|
||
<sl-switch>Enable mouse dragging</sl-switch>
|
||
</div>
|
||
|
||
<script>
|
||
(() => {
|
||
const container = document.querySelector('.mouse-dragging');
|
||
const carousel = container.querySelector('sl-carousel');
|
||
const toggle = container.querySelector('sl-switch');
|
||
|
||
toggle.addEventListener('sl-change', () => {
|
||
carousel.toggleAttribute('mouse-dragging', toggle.checked);
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-77">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-327"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mouse-dragging<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span><span class="token punctuation">></span></span>Enable mouse dragging<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">const</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.mouse-dragging'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> carousel <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-carousel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> toggle <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-switch'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
toggle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
carousel<span class="token punctuation">.</span><span class="token function">toggleAttribute</span><span class="token punctuation">(</span><span class="token string">'mouse-dragging'</span><span class="token punctuation">,</span> toggle<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-327"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-328"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>isEnabled<span class="token punctuation">,</span> setIsEnabled<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">mouseDragging</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isEnabled<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDivider</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDivider</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isEnabled<span class="token punctuation">}</span></span> <span class="token attr-name">onSlInput</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">setIsEnabled</span><span class="token punctuation">(</span><span class="token operator">!</span>isEnabled<span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Enable mouse dragging
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-328"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-77"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="multiple-slides-per-view" class="anchor-heading">
|
||
Multiple Slides Per View<a
|
||
href="#multiple-slides-per-view"
|
||
aria-label='Direct link to "Multiple Slides Per View"'
|
||
></a>
|
||
</h3>
|
||
<p>
|
||
The <code>slides-per-page</code> attribute makes it possible to display multiple slides at a time. You can
|
||
also use the <code>slides-per-move</code> attribute to advance more than once slide at a time, if desired.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel navigation="" pagination="" slides-per-page="2" slides-per-move="2">
|
||
<sl-carousel-item style="background: var(--sl-color-red-200)">Slide 1</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-orange-200)">Slide 2</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-yellow-200)">Slide 3</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-green-200)">Slide 4</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-blue-200)">Slide 5</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-violet-200)">Slide 6</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-78">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-329"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token attr-name">slides-per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">slides-per-move</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-red-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-orange-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-yellow-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-green-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-blue-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-violet-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-329"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-330"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token attr-name">slidesPerPage</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token attr-name">slidesPerMove</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-red-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-orange-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-yellow-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-green-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 4</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-blue-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 5</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-violet-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-330"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-78"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="adding-and-removing-slides" class="anchor-heading">
|
||
Adding and Removing Slides<a
|
||
href="#adding-and-removing-slides"
|
||
aria-label='Direct link to "Adding and Removing Slides"'
|
||
></a>
|
||
</h3>
|
||
<p>
|
||
The content of the carousel can be changed by adding or removing carousel items. The carousel will update
|
||
itself automatically.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel class="dynamic-carousel" pagination="" navigation="">
|
||
<sl-carousel-item style="background: var(--sl-color-red-200)">Slide 1</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-orange-200)">Slide 2</sl-carousel-item>
|
||
<sl-carousel-item style="background: var(--sl-color-yellow-200)">Slide 3</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="carousel-options">
|
||
<sl-button id="dynamic-add">Add slide</sl-button>
|
||
<sl-button id="dynamic-remove">Remove slide</sl-button>
|
||
</div>
|
||
|
||
<style>
|
||
.dynamic-carousel {
|
||
--aspect-ratio: 3 / 2;
|
||
}
|
||
|
||
.dynamic-carousel ~ .carousel-options {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--sl-spacing-x-small);
|
||
margin-top: var(--sl-spacing-large);
|
||
}
|
||
|
||
.dynamic-carousel sl-carousel-item {
|
||
flex: 0 0 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--sl-font-size-2x-large);
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(() => {
|
||
(() => {
|
||
const dynamicCarousel = document.querySelector('.dynamic-carousel');
|
||
const dynamicAdd = document.querySelector('#dynamic-add');
|
||
const dynamicRemove = document.querySelector('#dynamic-remove');
|
||
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
|
||
let colorIndex = 2;
|
||
|
||
const addSlide = () => {
|
||
const slide = document.createElement('sl-carousel-item');
|
||
const color = colors[++colorIndex % colors.length];
|
||
slide.innerText = `Slide ${dynamicCarousel.children.length + 1}`;
|
||
slide.style.setProperty('background', `var(--sl-color-${color}-200)`);
|
||
dynamicCarousel.appendChild(slide);
|
||
dynamicRemove.disabled = false;
|
||
};
|
||
|
||
const removeSlide = () => {
|
||
const slide = dynamicCarousel.children[dynamicCarousel.children.length - 1];
|
||
const numSlides = dynamicCarousel.querySelectorAll('sl-carousel-item').length;
|
||
|
||
if (numSlides > 1) {
|
||
slide.remove();
|
||
colorIndex--;
|
||
}
|
||
|
||
dynamicRemove.disabled = numSlides - 1 <= 1;
|
||
};
|
||
|
||
dynamicAdd.addEventListener('click', addSlide);
|
||
dynamicRemove.addEventListener('click', removeSlide);
|
||
})();
|
||
})();
|
||
</script>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-79">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-331"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-carousel<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-red-200<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-orange-200<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-yellow-200<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel-options<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-add<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Add slide<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-remove<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Remove slide<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token selector">.dynamic-carousel</span> <span class="token punctuation">{</span>
|
||
<span class="token property">--aspect-ratio</span><span class="token punctuation">:</span> 3 / 2<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.dynamic-carousel ~ .carousel-options</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-x-small<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-large<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.dynamic-carousel sl-carousel-item</span> <span class="token punctuation">{</span>
|
||
<span class="token property">flex</span><span class="token punctuation">:</span> 0 0 100%<span class="token punctuation">;</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-font-size-2x-large<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> dynamicCarousel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.dynamic-carousel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> dynamicAdd <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#dynamic-add'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> dynamicRemove <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#dynamic-remove'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">,</span> <span class="token string">'yellow'</span><span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token string">'violet'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> colorIndex <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">addSlide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> slide <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'sl-carousel-item'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> color <span class="token operator">=</span> colors<span class="token punctuation">[</span><span class="token operator">++</span>colorIndex <span class="token operator">%</span> colors<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
slide<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Slide </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>dynamicCarousel<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
slide<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">'background'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">var(--sl-color-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-200)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
dynamicCarousel<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>slide<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
dynamicRemove<span class="token punctuation">.</span>disabled <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">removeSlide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> slide <span class="token operator">=</span> dynamicCarousel<span class="token punctuation">.</span>children<span class="token punctuation">[</span>dynamicCarousel<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> numSlides <span class="token operator">=</span> dynamicCarousel<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'sl-carousel-item'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>numSlides <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
slide<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
colorIndex<span class="token operator">--</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
dynamicRemove<span class="token punctuation">.</span>disabled <span class="token operator">=</span> numSlides <span class="token operator">-</span> <span class="token number">1</span> <span class="token operator"><=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
dynamicAdd<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> addSlide<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
dynamicRemove<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> removeSlide<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-331"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-332"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
.dynamic-carousel {
|
||
--aspect-ratio: 3 / 2;
|
||
}
|
||
|
||
.dynamic-carousel ~ .carousel-options {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: var(--sl-spacing-large);
|
||
}
|
||
|
||
.dynamic-carousel sl-carousel-item {
|
||
flex: 0 0 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: var(--sl-font-size-2x-large);
|
||
}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>slides<span class="token punctuation">,</span> setSlides<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'#204ed8'</span><span class="token punctuation">,</span> <span class="token string">'#be133d'</span><span class="token punctuation">,</span> <span class="token string">'#6e28d9'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> colors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token string">'orange'</span><span class="token punctuation">,</span> <span class="token string">'yellow'</span><span class="token punctuation">,</span> <span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token string">'violet'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">addSlide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">setSlides</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>slides<span class="token punctuation">,</span> <span class="token function">getRandomColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">removeSlide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token function">setSlides</span><span class="token punctuation">(</span>slides<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-carousel<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token punctuation">{</span>slides<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">color<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> colors<span class="token punctuation">[</span>i <span class="token operator">%</span> colors<span class="token punctuation">.</span>length <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
Slide </span><span class="token punctuation">{</span>i<span class="token punctuation">}</span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel-options<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>addSlide<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Add slide</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>removeSlide<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Remove slide</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-332"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-79"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="vertical-scrolling" class="anchor-heading">
|
||
Vertical Scrolling<a href="#vertical-scrolling" aria-label='Direct link to "Vertical Scrolling"'></a>
|
||
</h3>
|
||
<p>
|
||
Setting the <code>orientation</code> attribute to <code>vertical</code> will render the carousel in a
|
||
vertical layout. If the content of your slides vary in height, you will need to set amn explicit
|
||
<code>height</code> or <code>max-height</code> on the carousel using CSS.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel class="vertical" pagination="" orientation="vertical">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
<style>
|
||
.vertical {
|
||
max-height: 400px;
|
||
}
|
||
|
||
.vertical::part(base) {
|
||
grid-template-areas: 'slides slides pagination';
|
||
}
|
||
|
||
.vertical::part(pagination) {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.vertical::part(navigation) {
|
||
transform: rotate(90deg);
|
||
display: flex;
|
||
}
|
||
</style>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-80">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-333"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token selector">.vertical</span> <span class="token punctuation">{</span>
|
||
<span class="token property">max-height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.vertical::part(base)</span> <span class="token punctuation">{</span>
|
||
<span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">'slides slides pagination'</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.vertical::part(pagination)</span> <span class="token punctuation">{</span>
|
||
<span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.vertical::part(navigation)</span> <span class="token punctuation">{</span>
|
||
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-333"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-334"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
.vertical {
|
||
max-height: 400px;
|
||
}
|
||
|
||
.vertical::part(base) {
|
||
grid-template-areas: 'slides slides pagination';
|
||
}
|
||
|
||
.vertical::part(pagination) {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.vertical::part(navigation) {
|
||
transform: rotate(90deg);
|
||
display: flex;
|
||
}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token attr-name">loop</span> <span class="token attr-name">pagination</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-334"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-80"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="aspect-ratio" class="anchor-heading">
|
||
Aspect Ratio<a href="#aspect-ratio" aria-label='Direct link to "Aspect Ratio"'></a>
|
||
</h3>
|
||
<p>
|
||
Use the <code>--aspect-ratio</code> custom property to customize the size of the carousel’s viewport from
|
||
the default value of 16/9.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel class="aspect-ratio" navigation="" pagination="" style="--aspect-ratio: 3/2">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<sl-divider></sl-divider>
|
||
|
||
<sl-select label="Aspect ratio" name="aspect" value="3/2">
|
||
<sl-option value="1/1">1/1</sl-option>
|
||
<sl-option value="3/2">3/2</sl-option>
|
||
<sl-option value="16/9">16/9</sl-option>
|
||
</sl-select>
|
||
|
||
<script>
|
||
(() => {
|
||
(() => {
|
||
const carousel = document.querySelector('sl-carousel.aspect-ratio');
|
||
const aspectRatio = document.querySelector('sl-select[name="aspect"]');
|
||
|
||
aspectRatio.addEventListener('sl-change', () => {
|
||
carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
|
||
});
|
||
})();
|
||
})();
|
||
</script>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-81">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-335"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aspect-ratio<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--aspect-ratio</span><span class="token punctuation">:</span> 3/2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Aspect ratio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aspect<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3/2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1/1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1/1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3/2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3/2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>16/9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>16/9<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> carousel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-carousel.aspect-ratio'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> aspectRatio <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-select[name="aspect"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
aspectRatio<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
carousel<span class="token punctuation">.</span>style<span class="token punctuation">.</span><span class="token function">setProperty</span><span class="token punctuation">(</span><span class="token string">'--aspect-ratio'</span><span class="token punctuation">,</span> aspectRatio<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-335"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-336"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>aspectRatio<span class="token punctuation">,</span> setAspectRatio<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'3/2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aspect-ratio<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--aspect-ratio'</span><span class="token operator">:</span> aspectRatio <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDivider</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSelect</span></span>
|
||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Aspect ratio<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aspect<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>aspectRatio<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onSlChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">event</span> <span class="token operator">=></span> <span class="token function">setAspectRatio</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1 / 1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">1 / 1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3 / 2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">3 / 2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>16 / 9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">16 / 9</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-336"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-81"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="scroll-hint" class="anchor-heading">
|
||
Scroll Hint<a href="#scroll-hint" aria-label='Direct link to "Scroll Hint"'></a>
|
||
</h3>
|
||
<p>
|
||
Use the <code>--scroll-hint</code> custom property to add inline padding in horizontal carousels and block
|
||
padding in vertical carousels. This will make the closest slides slightly visible, hinting that there are
|
||
more items in the carousel.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel class="scroll-hint" pagination="" style="--scroll-hint: 10%">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-82">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-337"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-hint<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--scroll-hint</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-337"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-338"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-hint<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--scroll-hint'</span><span class="token operator">:</span> <span class="token string">'10%'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-338"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-82"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="gallery-example" class="anchor-heading">
|
||
Gallery Example<a href="#gallery-example" aria-label='Direct link to "Gallery Example"'></a>
|
||
</h3>
|
||
<p>
|
||
The carousel has a robust API that makes it possible to extend and customize. This example syncs the active
|
||
slide with a set of thumbnails, effectively creating a gallery-style carousel.
|
||
</p>
|
||
|
||
<div class="code-preview">
|
||
<div class="code-preview__preview">
|
||
<sl-carousel class="carousel-thumbnails" navigation="" loop="">
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
|
||
src="/assets/examples/carousel/waterfall.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
|
||
src="/assets/examples/carousel/sunset.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
|
||
src="/assets/examples/carousel/field.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
<sl-carousel-item>
|
||
<img
|
||
alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
|
||
src="/assets/examples/carousel/valley.jpg"
|
||
/>
|
||
</sl-carousel-item>
|
||
</sl-carousel>
|
||
|
||
<div class="thumbnails">
|
||
<div class="thumbnails__scroller">
|
||
<img
|
||
alt="Thumbnail by 1"
|
||
class="thumbnails__image active"
|
||
src="/assets/examples/carousel/mountains.jpg"
|
||
/>
|
||
<img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/waterfall.jpg" />
|
||
<img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/sunset.jpg" />
|
||
<img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/field.jpg" />
|
||
<img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/valley.jpg" />
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.carousel-thumbnails {
|
||
--slide-aspect-ratio: 3 / 2;
|
||
}
|
||
|
||
.thumbnails {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.thumbnails__scroller {
|
||
display: flex;
|
||
gap: var(--sl-spacing-small);
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
scroll-behavior: smooth;
|
||
scroll-padding: var(--sl-spacing-small);
|
||
}
|
||
|
||
.thumbnails__scroller::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.thumbnails__image {
|
||
width: 64px;
|
||
height: 64px;
|
||
object-fit: cover;
|
||
|
||
opacity: 0.3;
|
||
will-change: opacity;
|
||
transition: 250ms opacity;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.thumbnails__image.active {
|
||
opacity: 1;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(() => {
|
||
{
|
||
const carousel = document.querySelector('.carousel-thumbnails');
|
||
const scroller = document.querySelector('.thumbnails__scroller');
|
||
const thumbnails = document.querySelectorAll('.thumbnails__image');
|
||
|
||
scroller.addEventListener('click', e => {
|
||
const target = e.target;
|
||
|
||
if (target.matches('.thumbnails__image')) {
|
||
const index = [...thumbnails].indexOf(target);
|
||
carousel.goToSlide(index);
|
||
}
|
||
});
|
||
|
||
carousel.addEventListener('sl-slide-change', e => {
|
||
const slideIndex = e.detail.index;
|
||
|
||
[...thumbnails].forEach((thumb, i) => {
|
||
thumb.classList.toggle('active', i === slideIndex);
|
||
if (i === slideIndex) {
|
||
thumb.scrollIntoView({
|
||
block: 'nearest'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<div class="code-preview__resizer">
|
||
<sl-icon name="grip-vertical"></sl-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__source-group" id="code-preview-source-group-83">
|
||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||
<pre><code class="language-html" id="code-block-339"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel-thumbnails<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun is setting over a lavender field (by Leonard Cotte on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)<span class="token punctuation">"</span></span>
|
||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__scroller<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Thumbnail by 1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__image active<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/mountains.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Thumbnail by 2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/waterfall.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Thumbnail by 3<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/sunset.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Thumbnail by 4<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/field.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Thumbnail by 5<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__image<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/examples/carousel/valley.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||
<span class="token selector">.carousel-thumbnails</span> <span class="token punctuation">{</span>
|
||
<span class="token property">--slide-aspect-ratio</span><span class="token punctuation">:</span> 3 / 2<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.thumbnails</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.thumbnails__scroller</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||
<span class="token property">gap</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-small<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
<span class="token property">scrollbar-width</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token property">scroll-behavior</span><span class="token punctuation">:</span> smooth<span class="token punctuation">;</span>
|
||
<span class="token property">scroll-padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-small<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.thumbnails__scroller::-webkit-scrollbar</span> <span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.thumbnails__image</span> <span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> 64px<span class="token punctuation">;</span>
|
||
<span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">opacity</span><span class="token punctuation">:</span> 0.3<span class="token punctuation">;</span>
|
||
<span class="token property">will-change</span><span class="token punctuation">:</span> opacity<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> 250ms opacity<span class="token punctuation">;</span>
|
||
|
||
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector">.thumbnails__image.active</span> <span class="token punctuation">{</span>
|
||
<span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> carousel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.carousel-thumbnails'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> scroller <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.thumbnails__scroller'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> thumbnails <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.thumbnails__image'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
scroller<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> target <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.thumbnails__image'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> index <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>thumbnails<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
carousel<span class="token punctuation">.</span><span class="token function">goToSlide</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
carousel<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-slide-change'</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> slideIndex <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>index<span class="token punctuation">;</span>
|
||
|
||
<span class="token punctuation">[</span><span class="token operator">...</span>thumbnails<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">thumb<span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
thumb<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">,</span> i <span class="token operator">===</span> slideIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> slideIndex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
thumb<span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">'nearest'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-339"></sl-copy-button></pre>
|
||
</div>
|
||
|
||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||
<pre><code class="language-jsx" id="code-block-340"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||
.carousel-thumbnails {
|
||
--slide-aspect-ratio: 3 / 2;
|
||
}
|
||
|
||
.thumbnails {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.thumbnails__scroller {
|
||
display: flex;
|
||
gap: var(--sl-spacing-small);
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
scroll-behavior: smooth;
|
||
scroll-padding: var(--sl-spacing-small);
|
||
}
|
||
|
||
.thumbnails__scroller::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.thumbnails__image {
|
||
width: 64px;
|
||
height: 64px;
|
||
object-fit: cover;
|
||
|
||
opacity: 0.3;
|
||
will-change: opacity;
|
||
transition: 250ms opacity;
|
||
|
||
cursor: pointer;
|
||
}
|
||
|
||
.thumbnails__image.active {
|
||
opacity: 1;
|
||
}
|
||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> images <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'/assets/examples/carousel/mountains.jpg'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">alt</span><span class="token operator">:</span> <span class="token string">'The sun shines on the mountains and trees (by Adam Kool on Unsplash'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'/assets/examples/carousel/waterfall.jpg'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">alt</span><span class="token operator">:</span> <span class="token string">'A waterfall in the middle of a forest (by Thomas Kelly on Unsplash'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'/assets/examples/carousel/sunset.jpg'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">alt</span><span class="token operator">:</span> <span class="token string">'The sun is setting over a lavender field (by Leonard Cotte on Unsplash'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'/assets/examples/carousel/field.jpg'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">alt</span><span class="token operator">:</span> <span class="token string">'A field of grass with the sun setting in the background (by Sapan Patel on Unsplash'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'/assets/examples/carousel/valley.jpg'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">alt</span><span class="token operator">:</span> <span class="token string">'A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> carouselRef <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> thumbnailsRef <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> <span class="token punctuation">[</span>currentSlide<span class="token punctuation">,</span> setCurrentSlide<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> thumbnails <span class="token operator">=</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span>thumbnailsRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.thumbnails__image'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
thumbnails<span class="token punctuation">[</span>currentSlide<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token function">scrollIntoView</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">block</span><span class="token operator">:</span> <span class="token string">'nearest'</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>currentSlide<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">handleThumbnailClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
carouselRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">goToSlide</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">const</span> <span class="token function-variable function">handleSlideChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> slideIndex <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>index<span class="token punctuation">;</span>
|
||
<span class="token function">setCurrentSlide</span><span class="token punctuation">(</span>slideIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarousel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel-thumbnails<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">loop</span> <span class="token attr-name">onSlSlideChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleSlideChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token punctuation">{</span>images<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> src<span class="token punctuation">,</span> alt <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>alt<span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>src<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>thumbnails__scroller<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token punctuation">{</span>images<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> src<span class="token punctuation">,</span> alt <span class="token punctuation">}</span><span class="token punctuation">,</span> i</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
<span class="token attr-name">alt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Thumbnail by </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">thumbnails__image </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i <span class="token operator">===</span> currentSlide <span class="token operator">?</span> <span class="token string">'active'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">handleThumbnailClick</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
<span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>src<span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">/></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</code><sl-copy-button class="copy-code-button" from="code-block-340"></sl-copy-button></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-preview__buttons">
|
||
<button
|
||
type="button"
|
||
class="code-preview__button code-preview__toggle"
|
||
aria-expanded="false"
|
||
aria-controls="code-preview-source-group-83"
|
||
>
|
||
Source
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
|
||
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
|
||
HTML
|
||
</button>
|
||
|
||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||
React
|
||
</button>
|
||
|
||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||
<svg
|
||
width="138"
|
||
height="26"
|
||
viewBox="0 0 138 26"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path
|
||
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 id="importing" class="anchor-heading">
|
||
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
|
||
</h2>
|
||
<p>
|
||
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free
|
||
to use any of the following snippets to
|
||
<a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
|
||
</p>
|
||
|
||
<sl-tab-group>
|
||
<sl-tab slot="nav" panel="script">Script</sl-tab>
|
||
<sl-tab slot="nav" panel="import">Import</sl-tab>
|
||
<sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
|
||
<sl-tab slot="nav" panel="react">React</sl-tab>
|
||
|
||
<sl-tab-panel name="script">
|
||
<p>
|
||
To import this component from
|
||
<a
|
||
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>the CDN</a
|
||
>
|
||
using a script tag:
|
||
</p>
|
||
<pre><code class="language-html" id="code-block-341"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-341"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="import">
|
||
<p>
|
||
To import this component from
|
||
<a
|
||
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
|
||
class="external-link"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>the CDN</a
|
||
>
|
||
using a JavaScript import:
|
||
</p>
|
||
<pre><code class="language-js" id="code-block-342"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-342"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="bundler">
|
||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||
<pre><code class="language-js" id="code-block-343"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel/carousel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-343"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
|
||
<sl-tab-panel name="react">
|
||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||
<pre><code class="language-js" id="code-block-344"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-344"></sl-copy-button></pre>
|
||
</sl-tab-panel>
|
||
</sl-tab-group>
|
||
|
||
<h2 id="slots" class="anchor-heading">Slots<a href="#slots" aria-label='Direct link to "Slots"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap">(default)</td>
|
||
<td>The carousel’s main content, one or more <code><sl-carousel-item></code> elements.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap">
|
||
<code>next-icon</code>
|
||
</td>
|
||
<td>
|
||
Optional next icon to use instead of the default. Works best with <code><sl-icon></code>.
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap">
|
||
<code>previous-icon</code>
|
||
</td>
|
||
<td>
|
||
Optional previous icon to use instead of the default. Works best with <code><sl-icon></code>.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#slots">using slots</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="properties" class="anchor-heading">
|
||
Properties<a href="#properties" aria-label='Direct link to "Properties"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-reflects">Reflects</th>
|
||
<th class="table-type">Type</th>
|
||
<th class="table-default">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">loop</code>
|
||
</td>
|
||
<td>When set, allows the user to navigate the carousel in the same direction indefinitely.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">navigation</code>
|
||
</td>
|
||
<td>When set, show the carousel’s navigation.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">pagination</code>
|
||
</td>
|
||
<td>When set, show the carousel’s pagination indicators.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">autoplay</code>
|
||
</td>
|
||
<td>When set, the slides will scroll automatically when the user is not interacting with them.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">autoplayInterval</code>
|
||
|
||
<br />
|
||
<sl-tooltip content="This attribute is different from its property">
|
||
<small>
|
||
<code class="nowrap"> autoplay-interval </code>
|
||
</small>
|
||
</sl-tooltip>
|
||
</td>
|
||
<td>Specifies the amount of time, in milliseconds, between each automatic scroll.</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>number</code>
|
||
</td>
|
||
<td>
|
||
<code>3000</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">slidesPerPage</code>
|
||
|
||
<br />
|
||
<sl-tooltip content="This attribute is different from its property">
|
||
<small>
|
||
<code class="nowrap"> slides-per-page </code>
|
||
</small>
|
||
</sl-tooltip>
|
||
</td>
|
||
<td>Specifies how many slides should be shown at a given time.</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>number</code>
|
||
</td>
|
||
<td>
|
||
<code>1</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">slidesPerMove</code>
|
||
|
||
<br />
|
||
<sl-tooltip content="This attribute is different from its property">
|
||
<small>
|
||
<code class="nowrap"> slides-per-move </code>
|
||
</small>
|
||
</sl-tooltip>
|
||
</td>
|
||
<td>
|
||
Specifies the number of slides the carousel will advance when scrolling, useful when specifying a
|
||
<code>slides-per-page</code> greater than one. It can’t be higher than <code>slides-per-page</code>.
|
||
</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>number</code>
|
||
</td>
|
||
<td>
|
||
<code>1</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">orientation</code>
|
||
</td>
|
||
<td>Specifies the orientation in which the carousel will lay out.</td>
|
||
<td style="text-align: center"></td>
|
||
<td>
|
||
<code>'horizontal' | 'vertical'</code>
|
||
</td>
|
||
<td>
|
||
<code>'horizontal'</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<code class="nowrap">mouseDragging</code>
|
||
|
||
<br />
|
||
<sl-tooltip content="This attribute is different from its property">
|
||
<small>
|
||
<code class="nowrap"> mouse-dragging </code>
|
||
</small>
|
||
</sl-tooltip>
|
||
</td>
|
||
<td>When set, it is possible to scroll through the slides by dragging them with the mouse.</td>
|
||
<td style="text-align: center">
|
||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||
</td>
|
||
<td>
|
||
<code>boolean</code>
|
||
</td>
|
||
<td>
|
||
<code>false</code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>updateComplete</code></td>
|
||
<td>
|
||
A read-only promise that resolves when the component has
|
||
<a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
|
||
</td>
|
||
<td></td>
|
||
<td></td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em
|
||
>Learn more about
|
||
<a href="/getting-started/usage#attributes-and-properties">attributes and properties</a>.</em
|
||
>
|
||
</p>
|
||
|
||
<h2 id="events" class="anchor-heading">Events<a href="#events" aria-label='Direct link to "Events"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name" data-flavor="html">Name</th>
|
||
<th class="table-name" data-flavor="react">React Event</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-event-detail">Event Detail</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td data-flavor="html"><code class="nowrap">sl-slide-change</code></td>
|
||
<td data-flavor="react"><code class="nowrap">onSlSlideChange</code></td>
|
||
<td>Emitted when the active slide changes.</td>
|
||
<td>
|
||
<code>{ index: number, slide: SlCarouselItem }</code>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#events">events</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="methods" class="anchor-heading">
|
||
Methods<a href="#methods" aria-label='Direct link to "Methods"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-arguments">Arguments</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>previous()</code></td>
|
||
<td>Move the carousel backward by <code>slides-per-move</code> slides.</td>
|
||
<td>
|
||
<code> behavior: ScrollBehavior </code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>next()</code></td>
|
||
<td>Move the carousel forward by <code>slides-per-move</code> slides.</td>
|
||
<td>
|
||
<code> behavior: ScrollBehavior </code>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>goToSlide()</code></td>
|
||
<td>Scrolls the carousel to the slide specified by <code>index</code>.</td>
|
||
<td>
|
||
<code> index: number, behavior: ScrollBehavior </code>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/usage#methods">methods</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="custom-properties" class="anchor-heading">
|
||
Custom Properties<a href="#custom-properties" aria-label='Direct link to "Custom Properties"'></a>
|
||
</h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
<th class="table-default">Default</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>--slide-gap</code></td>
|
||
<td>The space between each slide.</td>
|
||
<td></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--aspect-ratio</code></td>
|
||
<td>The aspect ratio of each slide.</td>
|
||
<td>16/9</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>--scroll-hint</code></td>
|
||
<td>
|
||
The amount of padding to apply to the scroll area, allowing adjacent slides to become partially
|
||
visible as a scroll hint.
|
||
</td>
|
||
<td></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em
|
||
>Learn more about
|
||
<a href="/getting-started/usage#custom-properties">customizing CSS custom properties</a>.</em
|
||
>
|
||
</p>
|
||
|
||
<h2 id="parts" class="anchor-heading">Parts<a href="#parts" aria-label='Direct link to "Parts"'></a></h2>
|
||
|
||
<div class="table-scroll">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th class="table-name">Name</th>
|
||
<th class="table-description">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="nowrap"><code>base</code></td>
|
||
<td>The carousel’s internal wrapper.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>scroll-container</code></td>
|
||
<td>The scroll container that wraps the slides.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>pagination</code></td>
|
||
<td>The pagination indicators wrapper.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>pagination-item</code></td>
|
||
<td>The pagination indicator.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>pagination-item--active</code></td>
|
||
<td>Applied when the item is active.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>navigation</code></td>
|
||
<td>The navigation wrapper.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>navigation-button</code></td>
|
||
<td>The navigation button.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>navigation-button--previous</code></td>
|
||
<td>Applied to the previous button.</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="nowrap"><code>navigation-button--next</code></td>
|
||
<td>Applied to the next button.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p>
|
||
<em>Learn more about <a href="/getting-started/customizing/#css-parts">customizing CSS parts</a>.</em>
|
||
</p>
|
||
|
||
<h2 id="dependencies" class="anchor-heading">
|
||
Dependencies<a href="#dependencies" aria-label='Direct link to "Dependencies"'></a>
|
||
</h2>
|
||
|
||
<p>This component automatically imports the following dependencies.</p>
|
||
|
||
<ul>
|
||
<li><code><sl-icon></code></li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
</body>
|
||
</html>
|