animate-slider
v1.5.3
Published
A customizable animation slider component
Downloads
29
Readme
animate-slider
A lightweight, customizable animation slider component for modern web projects.
Description
animate-slider allows you to create responsive sliders with customizable animations, navigation options, and touch support. It offers flexible configuration for animations, transition timings, and more.
Key Features
Lightweight and Efficient: Designed with performance in mind, it ensures smooth animations and transitions without overloading devices.
Flexible Configuration: Supports adjustable animation duration, timing functions, and navigation styles.
Touch and Responsive Support: Optimized for touch gestures and adaptable to all screen sizes.
Dependency-Free: No external dependencies, keeping your project lean and efficient.
Custom and Various Animations: animate-slider offers a rich set of built-in animations, allowing you to create sliders that stand out. You can also customize the animations to match your design requirements. Built-in Animations:
1.Rotate: Slides rotate along the X or Y axis for a dynamic 3D effect. 2.Scale: Slides zoom in or out during transitions. 3.Fade: A smooth opacity transition between slides. 4.Mirror: Creates a reflection-like effect for transitioning slides. 5.Pop-up: Slides appear to pop into view with a scaling effect.
Installation
Installation:
npm install animate-slideror
yarn add animate-sliderimport { initializeSlider } from 'animate-slider';
import 'animate-slider/src/animate-slider.css';
initializeSlider({
sliderContainerClass: 'your-slider-container-class',
animation: 'rotate', // Options: 'rotate', 'scale', 'fade', 'mirror', 'pop-up'
duration: 1, // Duration in seconds
timingFunction: 'ease-in-out', // Options: 'linear','ease', 'ease-in', 'ease-out', 'ease-in-out'
cardsToShowLargeScreen: 4, // Number of cards visible on large screens (≥1280px)
cardsToShowMediumScreen: 3, // Number of cards visible on medium screens (1024px–1279px)
cardsToShowSmallScreen: 2, // Number of cards visible on small screens (768px–1023px)
cardsToShowXSmallScreen: 2, // Number of cards visible on xsmall screens (<768px)
dots: true,
dotColor: '#ff0000' // Customize dot color HEX color 6 digit
});Options
- sliderContainerClass: The CSS class of the container element.
- animation: The animation type (
rotate,scale,fade,mirror,pop-up). - duration: Duration of the animation in seconds (0) for no animation.
- timingFunction: Timing function for animation (
linear,ease,ease-in,ease-out,ease-in-out). - cardsToShowLargeScreen: Number of cards visible on large screens (≥1280px).
- cardsToShowMediumScreen: Number of cards visible on medium screens (1024px–1279px).
- cardsToShowSmallScreen: Number of cards visible on small screens (768px–1023px).
- cardsToShowXSmallScreen: Number of cards visible on xsmall screens (<768px)
- dots: Show navigation dots (
trueorfalse). - dotColor: Color of the navigation dots "HEX Color 6 digit".
Dependencies
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.
HTML
<body>
<div class="your-slider-container-class">
<div>card-1</div>
<div>card-2</div>
<div>card-3</div>
</div>
</body>