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

3d-slider

v1.2.1

Published

A customizable 3D cylindrical slider component for web projects.

Vulnerabilities

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

Links

Git

Maintainers

luay_abbasluay_abbas

Keywords

3d-sliderslidercylindrical-animationresponsive-sliderjavascriptanimation

Readme

3D slider

A customizable animation slider component for web projects.

Description

3D slider allows you to create an interactive slider with a unique 3D cylindrical animation effect. The slider dynamically adjusts for different screen sizes and supports configurable navigation, dots, and animations.

Features

  • 3D Cylinder Animation: Cards are arranged in a cylindrical shape with smooth rotations.
  • Dynamic Properties: Adjusts perspective, card dimensions, and animations dynamically based on screen width.
  • Customizable screen size definitions:
    • Large Screens (≥1280px): Up to cardsToShowLargeScreen.
    • Medium Screens (1024px–1279px): Up to cardsToShowMediumScreen.
    • Small Screens (768px–1023px): Up to cardsToShowSmallScreen.
    • Mobile Screens (<768px): Discover triangle mode.
  • 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.
  • Always-On Rotation Control: When alwaysOnMode is enabled, users can toggle continuous rotation on or off by clicking or tapping - on the slider.

Installation

Installation:

npm install 3d-slider

or

yarn add 3d-slider
import { initializeSlider } from '3d-slider';
import '3d-slider/src/3d-slider.css';
initializeSlider({
  sliderContainerClass: "slider", // CSS class of the slider container.
  perspective: 1, // Slider container perspective.
  transitionDuration: 2, // Transition duration for animations (in seconds) - Default: 2
  alwaysOnMode: false, // Enable or disable continuous rotation mode.
  alwaysOnDesktopDuration: 15, // Continuous rotation duration for desktop (in seconds) - Recommend: 15
  alwaysOnMobileDuration: 5, // Continuous rotation duration for mobile (in seconds) - Recommend: 5
  cardsToShowLargeScreen: 10, // Number of cards visible on large screens (≥1280px) - Default: 10
  cardsToShowMediumScreen: 7, // Number of cards visible on medium screens (1024px–1279px) - Default: 7
  cardsToShowSmallScreen: 4, // Number of cards visible on small screens (768px–1023px) - Default: 4
  cardsToShowMobile: 2, // Cards to show on mobile mode (min 2) (max 3) 'Triangle mode' (<768px) - Default: 2
  dotsMode: true, // Enable or disable navigation dots.
  dotColor: "#959899", // HEX color for navigation dots (6 digit).
});

Options

  • sliderContainerClass: The CSS class of the container element.
  • perspective: 1 or higher to adjust container perspective.
  • transitionDuration: Transition duration (in seconds) for animations. - Default: 2
  • alwaysOnMode: Enable or disable always-on mode.
  • alwaysOnDesktopDuration: Continuous rotation duration for desktop (in seconds).
  • alwaysOnMobileDuration: Continuous rotation duration for mobile (in seconds).
  • cardsToShowLargeScreen: Number of cards visible on large screens (≥1280px). - Default: 10
  • cardsToShowMediumScreen: Number of cards visible on medium screens (1024px–1279px). - Default: 7
  • cardsToShowSmallScreen: Number of cards visible on small screens (768px–1023px). - Default: 4
  • cardsToShowMobile: Switch between (min 2) (max 3) 'Triangle mobile mode'(< 768px).
  • dots: Show navigation dots (true / false).
  • dotColor: Color of the navigation dots "HEX Color 6 digit".

How to Use the Toggle for Always-On Mode

If the alwaysOnMode is enabled in the configuration:

Click on the Slider: Clicking toggles between rotation and pause. When paused, the slider snaps to the nearest angle, aligning the active card in the viewport.

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 link

3D Slider demo link...

Other links

Portfolio link...