Scroll carousel, a unique content slider that specially works on window scroll.
Home Page: https://asif-jalil.github.io/scroll-carousel-website
License: MIT License
CDN providers:
| Name | About | Labels |
|---|---|---|
| 📚 Documentation | Report an issue related to documentation | 'documentation, needs triage' |
(A clear and concise description of what the issue is.)
(Write your answer here.)
Show preview form here
| Name | About | Labels |
|---|---|---|
| 📚 Documentation | Report an issue related to documentation | 'documentation, needs triage' |
(A clear and concise description of what the issue is.)
(Write your answer here.)
It would have been nice if there were an option/method to allow an easy way to see the next or previous item while you're not scrolling by adding buttons, and maybe another feature that can swipe the carousel by clicking and dragging the mouse.
Whenever I am trying to import ScrollCarousel from scroll-carousel my NextJs app gets crashed and throws some error.
Server Error
ReferenceError: document is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
docReady
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (236:20)
htmlInit
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (258:3)
<unknown>
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (699:48)
<unknown>
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (701:2)
<unknown>
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (704:12)
webpackUniversalModuleDefinition
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (11:20)
Object.<anonymous>
file:///Users/mahadihassanriyadh/Documents/Coding/Web%20Development/Sysonex/sysonex-landing-page/node_modules/scroll-carousel/dist/scroll.carousel.js (18:3)
Module._compile
node:internal/modules/cjs/loader (1126:14)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1180:10)
Module.load
node:internal/modules/cjs/loader (1004:32)
useEffect(() => {
if (typeof window !== "undefined") {
const initializationTimeout = setTimeout(() => {
new ScrollCarousel(".carousel", {
autoplay: true,
smartSpeed: true,
margin: 0,
});
}, 100);
return () => {
clearTimeout(initializationTimeout);
};
}
}, []);
The above initialization works on development but I'm struggling with "document" is not available during server-side rendering. on gatsby build.
I'm hoping someone may point me in the right direction.
Description
When the carousel is placed in flexbox and the flex-direction: column; is set, a horizontal scrollbar appears—attached is a picture for a greater understanding.
I am giving the sample code to reproduce the issue. I am using class using bootstrap.
<div class="d-flex flex-column">
<div>Something is happening</div>
<div class="scroll-carousel-viewport">
<div class="scroll-carousel-slider">
....................
</div>
</div>
</div>
There should be option for a margin between two slides. A default margin must be set
I have used this library in Next JS App. I search for option to show slide per page. unfortunately I don't see anywhere.
thanks
Blur from 2 sides of the carousel.
The example is on the slick carousel - https://github.com/kenwheeler/slick/#data-attribute-settings
If i use carousel with tailwind css, the all the slider goes in one line. See the image given below.
Show preview form here
Only the selected slider with class name will be selected
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.