All Projects → dimanech → Scroll Snap Carousel

dimanech / Scroll Snap Carousel

Licence: mit
Carousel based on CSS Scroll Snap functionality

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Scroll Snap Carousel

Snappyrecyclerview
An extension to RecyclerView which will snap to child Views to the specified anchor, START, CENTER or END.
Stars: ✭ 178 (+474.19%)
Mutual labels:  scroll, snap
react-native-reanimated-carousel
🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
Stars: ✭ 1,461 (+4612.9%)
Mutual labels:  snap, carousel
Scroll Snap
↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
Stars: ✭ 187 (+503.23%)
Mutual labels:  scroll, snap
vue-scroll-snap
A super simple Vue component that allows fullscreen and horizontal scroll snapping.
Stars: ✭ 25 (-19.35%)
Mutual labels:  snap, scroll
React Native Swiper Flatlist
👆 Swiper component implemented with FlatList using Hooks & Typescript + strict automation tests with Detox
Stars: ✭ 217 (+600%)
Mutual labels:  scroll, carousel
ACarousel
A carousel view for SwiftUI | SwiftUI 旋转木马效果
Stars: ✭ 124 (+300%)
Mutual labels:  carousel, scroll
Carouselview
Carousel View
Stars: ✭ 22 (-29.03%)
Mutual labels:  carousel
Fuckmyscroll.js
🔮 Animated scrolling to certain point or anchor
Stars: ✭ 10 (-67.74%)
Mutual labels:  scroll
Newpagedflowview
电影票卡片式无限自动轮播图
Stars: ✭ 819 (+2541.94%)
Mutual labels:  carousel
Splide
Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
Stars: ✭ 786 (+2435.48%)
Mutual labels:  carousel
React Redux Scroll
Stars: ✭ 30 (-3.23%)
Mutual labels:  scroll
Hammer Slider
DISCONTINUED - HammerSlider touch is a lightweight infinite carousel plugin.
Stars: ✭ 21 (-32.26%)
Mutual labels:  carousel
Snapp
Snapp! turns Snap! projects into standalone executables!
Stars: ✭ 26 (-16.13%)
Mutual labels:  snap
Eager Image Loader
The eager-loading for image files on the web page that loads the files according to your plan. This differs from the lazy-loading, for example, this can be used to avoid that the user waits for the loading.
Stars: ✭ 22 (-29.03%)
Mutual labels:  scroll
Android scroll endless
Scroll endless for Android recyclerview
Stars: ✭ 12 (-61.29%)
Mutual labels:  scroll
React Carousel
React carousel component.
Stars: ✭ 16 (-48.39%)
Mutual labels:  carousel
Fullpage.js
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
Stars: ✭ 32,974 (+106267.74%)
Mutual labels:  snap
Infinite Ajax Scroll
Turn your existing pagination into infinite scrolling pages with ease
Stars: ✭ 804 (+2493.55%)
Mutual labels:  scroll
Egjs Flicking
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
Stars: ✭ 937 (+2922.58%)
Mutual labels:  carousel
React Whirligig
A react carousel/slider like component for sequentially displaying slides or sets of slides
Stars: ✭ 20 (-35.48%)
Mutual labels:  carousel

Snap scroll carousel

"Classical" carousels huge libraries could be easily replaced by native scroll functionality. This would contribute to grater UX, better performance and progressive enhancement approach.

You probably know that scroll is very complex functionality that very hard to implement without access to native OS API. That's why native scroll is more comfortable for the user (on modern desktop and mobile) than any point-and-click functionality.

CSS snap points

Carousel in most cases could be substituted with horizontal scroll view, but in classical "carousels", you are expected some snapping of scrolling.

And it has been 3 years or so when this API available for browsers.

Features

  • Progressive enhancement, basic functionality available without JS
  • Responsive
  • LTR and RTL directions support
  • AAA ARIA accessibility (focus of elements and visibility for AT)
  • Could be controlled from keyboard (tab, arrows), mouse, touch etc. without any JS logic (Chrome has bug with arrows navigation)
  • Scroll up to all elements, not just 1 at the time

Infinite scrolling

Could be implemented but would be performance fall. Since it based on scroll we have boundaries of the list.

Browser compatibility

As progressive enhancement supports in every browsers from Netscape navigator 1.0 to latest Firefox.

Progressive enhancement and graceful degradation:

  1. if no JS available it would be just native scroll;
  2. if scroll snap CSS API available it would be snapped to declared values;
  3. if JS and snap scroll available than user will have Buttons and pagination functionality improvements over native scroll.

With polyfill tested:

  • FF (68.0), Chrome (75.0.3770.142) Linux
  • FF (68.0), Chrome (75.0.3770.142) MacOS

Note! Each OS and OS preferences resulted on different, but always familiar scroll behavior.

Safari 12.1.1 not work smooth scroll (could be polyfiled) Edge not work smooth scroll 11 not work smooth scroll

License

MIT D.Nechepurenko 2020

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].