# touchpad-scroll-carousel > The simple, lightweight responsive carousel that requires no dependencies and supports scroll on touchpad. Latest version **1.0.3** (published 2023-01-16) · MIT license · 0 weekly downloads ## Install ```sh npm install touchpad-scroll-carousel pnpm add touchpad-scroll-carousel yarn add touchpad-scroll-carousel bun add touchpad-scroll-carousel ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.3 | | Published | 2023-01-16 | | First published | 2022-12-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 47.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 7 | | Author | Robin Huy | | Maintainers | robinhuy90 | | Keywords | javascript, scroll, touchpad, carousel | ## Links - npm: https://www.npmjs.com/package/touchpad-scroll-carousel - Repository: https://github.com/robinhuy/touchpad-scroll-carousel - Homepage: https://github.com/robinhuy/touchpad-scroll-carousel#readme - Issues: https://github.com/robinhuy/touchpad-scroll-carousel/issues - npm.io page: https://npm.io/package/touchpad-scroll-carousel ## Alternatives - [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads - [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads - [better](https://npm.io/package/better.md) — 42 weekly downloads - [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads - [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads ## Recent versions - 1.0.3 (latest) — 2023-01-16 - 1.0.2 — 2023-01-06 - 1.0.1 — 2022-12-30 - 1.0.0 — 2022-12-29 ## README # Touchpad Scroll Carousel _The simple, lightweight responsive carousel that requires no dependencies and supports scroll (left/right) on touchpad._ ## Demo [Touchpad Scroll Carousel Example](https://huydq.dev/static-apps/touchpad-scroll-carousel/) ## Install ### Markup HTML would look something like this: ```html

``` You only need a list of item (slide), then initialize the carousel like this: ```javascript TouchpadScrollCarousel({ carouselSelector: "#carousel", ... // other options }); ``` ### CDN jsDelivr: [https://cdn.jsdelivr.net/npm/touchpad-scroll-carousel/dist/touchpad-scroll-carousel.min.js](https://cdn.jsdelivr.net/npm/touchpad-scroll-carousel/dist/touchpad-scroll-carousel.min.js) Example use CDN: ```html ...

``` ### NPM ``` npm install touchpad-scroll-carousel ``` or using `yarn`: ``` yarn add touchpad-scroll-carousel ``` Example use NPM for a React App: ```jsx import { useEffect } from "react"; import "touchpad-scroll-carousel/dist/touchpad-scroll-carousel.min.js"; const CarouselComponent = () => { useEffect(() => { window.TouchpadScrollCarousel({ carouselSelector: "#carousel", }); }, []); return (

); }; 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: ```js 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](#scrollbarstyle-option) | Contains style settings for the scrollbar. Only work when `showScrollbar = true`. | | responsive | array | null | Array of objects [contains breakpoints and setting objects (see example)](#responsive-option). 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: ```javascript 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: ```javascript 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 Copyright (c) 2022 Robin Huy. Licensed under the MIT license. --- _Source: https://npm.io/package/touchpad-scroll-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._