Animate-slider NPM

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-slider

yarn add animate-slider

import { 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 (true or false).
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>

Library demo

Library demo link...

animate-slider v1.5.4