react-indiana-drag-scroll
splide
Our great sponsors
| react-indiana-drag-scroll | splide | |
|---|---|---|
| 1 | 25 | |
| 485 | 4,639 | |
| - | 2.3% | |
| 0.0 | 0.0 | |
| over 1 year ago | 4 days ago | |
| TypeScript | TypeScript | |
| GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-indiana-drag-scroll
-
I wasted two days jerry-rigging a package when the solution was one search away
At first, I was going to use react-indiana-drag-scroll to solve the first problem. And it worked. But I had a feeling that there might be a solution that solved both of these problems at the same time. Searching on libhunt, openbase, and duckduckgo, I found out that this problem is actually very old and the term that better fit my problem was "pan and zoom". Searching with this term, I stumbled upon react-pan-and-zoom-hoc, which helped solve my problem, but it was difficult to fidget with because rather than having a simple component, the component spit out the correct x, y axes translation that would need to be worked into the component's CSS. No bueno. I attempted to jerry-rig this package for two days before giving up and switching to react-svg-pan-zoom, which worked pretty much instantly and was exactly what I needed.
splide
- SplideJS – The lightweight, flexible and accessible slider/carousel
-
XHR not loading in Safari on MacOS?
I am initializing a JS library called Splide (v4.1.2) but images don’t seem to load in Safari. I get this error message, which I think has to do with the XMLHttpRequest:
-
Build A Reusable Carousel With React And Splide.js
In this article, you will build a reusable carousel component using React and Splide.Js — a lightweight and versatile slider library.
- Advice on creating an animation like this for my opening page?
-
How to make sliders swipeable, just like instagram carousels ?
Check out Splide Slide. There are a lot of different sliders to choose from. You'll have to know a little about javascript to be able to use it, which can get a little tricky. Timothy Ricks has a couple tutorials on how to implement it. This one in particular.
-
Trying to remember the name of a library...
Maybe this https://splidejs.com/?
-
What is your favourite slider module?
I used https://splidejs.com/ in recent projects.
-
Do developers create carousels from scratch most of the time?
Thoughts on Splide? It’s also really good & lightweight https://splidejs.com
-
What is this designed called? And how would you make this in tailwindcss? I tried searching carusel, card ,card carusel, scrolling cards etc.
You can easily achieve that with a js package such as https://splidejs.com
-
How do I get different carousels like this?
Slick is a very popular carousel, I use splide but either one would be able to make a slider like that
What are some alternatives?
react-hexgrid - Build interactive hexagon grids with React
Swiper - Most modern mobile touch slider with hardware accelerated transitions
react-pan-and-zoom-hoc
Glide.js - A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
react-svg-pan-zoom - :eyes: A React component that adds pan and zoom features to SVG
slick - the last carousel you'll ever need
svelte-gesture - 👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.
vanilla-lazyload - LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
use-scroll-direction - A simple, performant, and cross-browser hook for detecting scroll direction in your next react app.
Flickity - :leaves: Touch, responsive, flickable carousels
React horizontal scrolling menu - Horizontal scrolling menu component for React.
Embla Carousel - A lightweight carousel library with fluid motion and great swipe precision.