Introducing Native Carousel
July 29, 2021 5:54 am Leave your thoughtsA 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
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
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
Peeking
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
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
Carousel here
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
عروس دریایی
چتر دریایی و ژله های دریایی نام های غیررسمی متفاوتی است که به فاز مدوزا برخی از اعضای ژلاتینی موجود در زیر پناهگاه Medusozoa ، بخش عمده ای از پناهگاه Cnidaria داده می شود. چتر دریایی عمدتاً حیوانات دریایی شنای آزاد با زنگوله هایی به شکل چتر و شاخک های دنباله دار است ، هرچند تعداد کمی از آنها به جای تحرک بودن توسط ساقه ها در کف دریا لنگر می اندازند.
لاکپشت دریایی
لاک پشت های دریایی (خانواده فوق العاده Chelonioidea) ، که گاهی اوقات لاک پشت های دریایی نیز نامیده می شوند ، خزندگان از راسته Testudines و از زیرمجموعه Cryptodira هستند. هفت گونه لاک پشت دریایی شامل لاک پشت دریایی سبز ، لاک پشت دریایی لاگر سر ، لاک پشت دریایی کمپ ، لاک پشت دریایی زیتون ، لاک پشت دریایی شاهین ، لاک پشت دریایی تخت و لاک پشت دریایی چرمی است.
دلفین
دلفین نام رایجی از پستانداران آبزی در زیر مرز Cetacea است. اصطلاح دلفین معمولاً به خانواده های موجود Delphinidae (دلفین های اقیانوسی) ، Platanistidae (دلفین های رودخانه هند) ، Iniidae (دلفین های رودخانه جهان جدید) و Pontoporiidae (دلفین های شور) و لیپوتیداهای منقرض شده (Baiji یا رودخانه چین) اشاره دارد. دلفین). 40 گونه موجود به نام دلفین وجود دارد.
Tabs
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
Kaohsiung, Taiwan Bastia, Corsica Financial District, Manhattan Smaller image YouTube embed
Inline lightbox
Kaohsiung, Taiwan Bastia, Corsica Financial District, Manhattan Smaller image YouTube embed
Vertical
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
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!
Categorised in: Works
This post was written by rado