npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

sheets-slider

v1.1.0

Published

A customizable 3D slider component for web projects.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

luay_abbasluay_abbas

Keywords

sheets-sliderslidercarouselresponsive-sliderjavascriptanimation

Readme

Sheets Slider

A customizable animation slider component for web projects.

Description

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."

Features

  • 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

Installation:

npm install sheets-slider

or

yarn add sheets-slider
import { 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.
});

Options

  • 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".

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>

Demo

Check out the live Sheets Slider demo.

Installation

You can find the library on npm.

Other

Portfolio link...