A customizable animation slider component for web projects.
Sheets slider allows you to create an interactive slider with a unique animation effect. The slider dynamically adjusts for different screen sizes and supports configurable navigation, dots, and animations.
"Sometimes, the tasks we usually ignore because we dislike them can spark new ideas. Sheets Slider was born while I was sorting through a pile of mail."
- Smooth Animation: A sleek and responsive slider for various use cases.
- Dynamic Properties: Adjusts perspective, card dimensions, and animations dynamically based on screen width.
- Customizable Dots: Includes configurable dots for group navigation with customizable colors.
- Navigation Options: Supports buttons for navigating individual cards or groups, with optional navigation dots.
- Touch Support: Mobile-friendly design with touch gesture support for navigation.
Installation:
npm install sheets-slideror
yarn add sheets-sliderimport { initializeSlider } from 'sheets-slider';
import 'sheets-slider/src/sheets-slider.css';Usage Example
Simply provide the numeric value without any suffix. For example, `1000` instead of `1000px`.
initializeSlider({
sliderContainerClass: "slider", // CSS class of the slider container.
perspective: 1000, // Slider container perspective (in px).
transitionDuration: 1, // Transition duration for animations (in s).
activeSheetTranslateY: -60, // Adjusts the vertical position of the active card (in %).
activeSheetTranslateZ: 300, // Depth of the 3D effect (in px).
activeSheetTranslateZMobile: 150, // Depth of the 3D effect on mobile (in px).
inactiveSheetsTranslateX : 50, // X position of the inactive cards just for desktop (in %).
inactiveSheetsTranslateY: -60 , // Y position of the inactive cards (in %).
inactiveSheetsTranslateZ: -100, // Depth of the 3D effect (in px).
inactiveSheetsRotateY: 5, // Rotate of inactive cards (in deg).
dots: true, // Enable or disable navigation dots.
dotsColor: "#959899", // HEX color for navigation dots.
});
- sliderContainerClass: The CSS class of the container element.
- perspective: Adjusts container perspective for 3D depth.
- transitionDuration: Transition duration (in seconds) for animations.
- activeSheetTranslateY: Adjusts Y position (in %) of the active card.
- activeSheetTranslateZ: Depth effect (in px) of the active card for desktops.
- activeSheetTranslateZMobile: Depth effect (in px) of the active card for mobile devices.
- inactiveSheetsTranslateX: Adjusts X position (in %) of the inactive cards for desktop.
- inactiveSheetsTranslateY: Adjusts Y position (in %) of the inactive cards.
- inactiveSheetsTranslateZ: Depth effect (in px) of the inactive cards.
- inactiveSheetsRotateY: Rotate effect (in deg) of the inactive cards.
-
dots: Show navigation dots (
true/false). - dotColor: Color of the navigation dots "HEX Color 6 digit".
This version of animate-slider has no external dependencies, making it lightweight and easy to use. No additional packages are required to run the slider.
<body>
<div class="your-slider-container-class">
<div>card-1</div>
<div>card-2</div>
<div>card-3</div>
</div>
</body>Check out the live Sheets Slider demo.
You can find the library on npm.