Introducing Native Carousel

A carousel component which uses the native scroll snapping functionality with enhancements and customisation. It is lightweight and accessible, with vertical, auto height, tabs, lightbox, layout options, RTL support and no dependencies

Index Auto height Auto slide Peeking Outside controls Detached controls Right to left Tabs Lightbox Inline lightbox Vertical Vertical auto height

Index

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Auto height

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Auto slide

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Peeking

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Outside controls

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Detached controls

Previous Next

1 2 3

Carousel here

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Right to left

Previous

Next

1 2 3

• 

  عروس دریایی

  چتر دریایی و ژله های دریایی نام های غیررسمی متفاوتی است که به فاز مدوزا برخی از اعضای ژلاتینی موجود در زیر پناهگاه Medusozoa ، بخش عمده ای از پناهگاه Cnidaria داده می شود. چتر دریایی عمدتاً حیوانات دریایی شنای آزاد با زنگوله هایی به شکل چتر و شاخک های دنباله دار است ، هرچند تعداد کمی از آنها به جای تحرک بودن توسط ساقه ها در کف دریا لنگر می اندازند.

• لاکپشت دریایی

  لاک پشت های دریایی (خانواده فوق العاده Chelonioidea) ، که گاهی اوقات لاک پشت های دریایی نیز نامیده می شوند ، خزندگان از راسته Testudines و از زیرمجموعه Cryptodira هستند. هفت گونه لاک پشت دریایی شامل لاک پشت دریایی سبز ، لاک پشت دریایی لاگر سر ، لاک پشت دریایی کمپ ، لاک پشت دریایی زیتون ، لاک پشت دریایی شاهین ، لاک پشت دریایی تخت و لاک پشت دریایی چرمی است.

  
• 

  دلفین

  دلفین نام رایجی از پستانداران آبزی در زیر مرز Cetacea است. اصطلاح دلفین معمولاً به خانواده های موجود Delphinidae (دلفین های اقیانوسی) ، Platanistidae (دلفین های رودخانه هند) ، Iniidae (دلفین های رودخانه جهان جدید) و Pontoporiidae (دلفین های شور) و لیپوتیداهای منقرض شده (Baiji یا رودخانه چین) اشاره دارد. دلفین). 40 گونه موجود به نام دلفین وجود دارد.

Tabs

Previous

Next

Jellyfish Sea turtle Dolphin

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Lightbox

Previous

Next

5

Toggle full screen

• 

• 

• 

• 

Inline lightbox

Previous

Next

5

Toggle full screen

Close modal window

• 

• 

• 

• 

Vertical

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Vertical auto height

Previous

Next

1 2 3

• 

  Jellyfish

  Jellyfish and sea jellies are the informal common names given to the medusa-phase of certain gelatinous members of the subphylum Medusozoa, a major part of the phylum Cnidaria.

• Sea turtle

  Sea turtles (superfamily Chelonioidea), sometimes called marine turtles, are reptiles of the order Testudines and of the suborder Cryptodira.

  
• 

  Dolphin

  Dolphin is a common name of aquatic mammals within the infraorder Cetacea.

Full site: https://nativecarousel.com

Why another carousel component

Native Carousel is as close as possible to the built-in browser capabilities (scrolling, real buttons etc) and while there are many similar tech demos around, this one is intended as complete product. The native web offers rich functionality and great UX with a little* coding and overcoming browser issues. Using Scroll Snapping lets the browser take care of swiping and scrolling and provides carousel interaction in the most natural way. It works without JavaScript, while there are a number of enhancements when the script is loaded.

How it works

The slides are grouped in a scrollable row and after snapping to a new position, the script updates the index. Buttons animate the scroll position.

Features

• Stable: Unbreakable structure with any length of content.
• Accessibile: Arrow keys slide when the carousel is in focus. Keyboard-accessible buttons are used for controls. The “prefers reduced motion” setting is respected.
• Performant: The native scroll is a fast way to move content around.
• Featureful: Vertical option, visible neighbours, controls position options, auto height option, tabs option, auto slide option, detached controls option, Lightbox, inline Lightbox with modal, full screen option.
• Compatible: Intended to work anywhere even without JS.
• Natural: Swiping uses the native scrolling on trackpad and touch. No need to click, hold and swipe with the mouse, which makes elements inside the slides undraggable.
• Lightweight: 7 KB total – 3.5 KB of CSS and optional 3.5 KB of JavaScript.
• Embeddable: Carousel inside carousel works without limits.
• Seamless integration in any page or context with BEM classes.
• Modern: Scroll Snap, CSS Grid, Resize Observer etc.
• Themeable with CSS variables
• RTL support
• No dependencies

How to use

Get the n-carousel NPM module and either add n-carousel.js and n-carousel.scss to your project or use n-carousel.min.js and n-carousel.min.css on your page.

The subpixel conundrum and other pitfalls

The initial concept is clear enough, but the state of all browsers made development harder than it should have been. Here are some of the issues encountered along the way:

• Padding is not respected in a scrolling container,
• Browsers eager to optimize and inconsistent in timing,
• Browsers don’t keep scroll position on resize (fixed since),
• Chrome freezes scroll snap when scrolling both directions during snapping,
• Sub pixel dimensions unsupported in scroll position,
• Scroll behavior “smooth” wasn’t used, because it’s unsupported by Safari and doesn’t allow custom duration,
• el.animate() wasn’t used because it doesn’t support scroll,
• Fun with mouse wheel, trackpad on Windows,
• Wrapper bleeds subpixel content,
• Safari resets scroll position after exit from full screen,
• Safari floors this value: width: calc(100% – 0px) (fixed in v15),
• Safari can’t animate scroll and height at once,
• Safari can’t re-enable pointer events programmatically,
• Safari resets scroll position when snapping is re-enabled (fixed in v15),
• Safari not supporting snapping in RTL (fixed in v14).
• And many more…

What’s next

• Endless carousel
• Cross fade/dissolve
• Start from any slide, hash support
• Multiple slides visible at once

Learn more at https://nativecarousel.com. Thanks for supporting the open native web and happy scrolling!