Touchpad-scroll-carousel NPM

Touchpad Scroll Carousel

The simple, lightweight responsive carousel that requires no dependencies and supports scroll (left/right) on touchpad.

Demo

Touchpad Scroll Carousel Example

Install

Markup

HTML would look something like this:

<div id="carousel">
  <div class="item">
    <a href="...">
      <img src="..." alt="..." />
    </a>
  </div>
</div>

You only need a list of item (slide), then initialize the carousel like this:

TouchpadScrollCarousel({
  carouselSelector: "#carousel",
  ... // other options
});

CDN

jsDelivr: https://cdn.jsdelivr.net/npm/touchpad-scroll-carousel/dist/touchpad-scroll-carousel.min.js

Example use CDN:

...
<body>
  <div id="carousel">
    <div class="item">
      <a href="..."><img src="..." alt="..." /></a>
    </div>

    <div class="item">
      <a href="..."><img src="..." alt="..." /></a>
    </div>

    <div class="item">
      <a href="..."><img src="..." alt="..." /></a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/gh/robinhuy/touchpad-scroll-carousel/dist/touchpad-scroll-carousel.min.js"></script>
  <script>
    TouchpadScrollCarousel({
      carouselSelector: "#carousel",
    });
  </script>
</body>

NPM

npm install touchpad-scroll-carousel

or using yarn:

yarn add touchpad-scroll-carousel

Example use NPM for a React App:

import { useEffect } from "react";
import "touchpad-scroll-carousel/dist/touchpad-scroll-carousel.min.js";

const CarouselComponent = () => {
  useEffect(() => {
    window.TouchpadScrollCarousel({
      carouselSelector: "#carousel",
    });
  }, []);

  return (
    <div id="carousel">
      <div className="item">
        <a href="...">
          <img src="..." alt="..." />
        </a>
      </div>

      <div className="item">
        <a href="...">
          <img src="..." alt="..." />
        </a>
      </div>

      <div className="item">
        <a href="...">
          <img src="..." alt="..." />
        </a>
      </div>
    </div>
  );
};

export default CarouselComponent;

If you want to use TypeScript, create a file name index.d.ts in root folder of the project or in same folder as the component:

export {};

interface ResponsiveOptions {
  breakpoint?: number;
  slidesToShow?: number;
  gap?: number;
}

interface TouchpadScrollCarouselOptions {
  carouselSelector: string;
  slidesToShow?: number;
  slidesToScroll?: number;
  gap?: number;
  mouseDrag?: boolean;
  showArrows?: boolean;
  nextButtonSelector?: string;
  prevButtonSelector?: string;
  showScrollbar?: boolean;
  scrollbarStyle?: {
    position?: string;
    height?: number;
    marginTop?: number;
    marginBottom?: number;
    borderRadius?: number;
    backgroundColor?: string;
    thumbColor?: string;
    thumbHoverColor?: string;
  };
  responsive?: ResponsiveOptions[];
}

declare global {
  interface Window {
    TouchpadScrollCarousel: (options: TouchpadScrollCarouselOptions) => void;
  }
}

Settings

Option	Type	Default	Description
carouselSelector	string (CSS selector)	null	Selects a node to initialize the carousel
gap	int (value as pixel unit)	15	The gap between items
mouseDrag	boolean	true	Enables mouse dragging
showArrows	boolean	true	Enables Next/Prev arrows
nextButtonSelector	string (CSS selector)	`#btn-next`	Allows you to select a node to customize the "Next" arrow. Only work when `showArrows = true`.
prevButtonSelector	string (CSS selector)	`#btn-prev`	Allows you to select a node to customize the "Previous" arrow. Only work when `showArrows = true`.
showScrollbar	boolean	true	Enables scrollbar.
scrollbarStyle	object	See example	Contains style settings for the scrollbar. Only work when `showScrollbar = true`.
responsive	array	null	Array of objects contains breakpoints and setting objects (see example). Enables settings at given `breakpoint`.
slidesToScroll	int	1	# of slides to scroll at a time
slidesToShow	float	1	# of slides to show at a time

ScrollbarStyle Option

The scrollbar style options, for example:

TouchpadScrollCarousel({
  carouselSelector: "#carousel",
  scrollbarStyle: {
    position: "bottom", // "top" or "bottom"
    height: 8,
    marginTop: 8,
    marginBottom: 8,
    borderRadius: 4,
    backgroundColor: "#ebebeb",
    thumbColor: "#6d6d6d",
    thumbHoverColor: "#4b4b4b",
  },
});

Note that dimensions are measured in px and colors are in string format (color name, hex value,...).

Responsive Option

The responsive options with self-defined breakpoints, for example:

TouchpadScrollCarousel({
  carouselSelector: "#carousel",
  responsive: [
    {
      breakpoint: 768,
      slidesToShow: 2.5,
      gap: 20,
    },
    {
      breakpoint: 1200,
      slidesToShow: 4,
      gap: 30,
    },
  ],
});

Browser support

Touchpad Scroll Carousel works on modern browsers such as Edge, Chrome, Firefox, and Safari.

License

Licensed under the MIT license.

javascript scroll touchpad carousel

@infinitebrahmanuniverse/nolb-tou @everything-registry/sub-chunk-2962

1 year ago

1 year ago

1 year ago

1 year ago