# qwik-slider

> A simple and customizable slider for Qwik

Latest version **1.1.0** (published 2023-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install qwik-slider
pnpm add qwik-slider
yarn add qwik-slider
bun add qwik-slider
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-10-21 |
| First published | 2023-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=15.0.0 |
| Dependencies | 0 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 33 |
| Maintainers | amirsa12 |
| Keywords | qwik, qwikdev, builder.io, typescript, slider, qwik-slider, carousel, qwik-slide |

## Links

- npm: https://www.npmjs.com/package/qwik-slider
- Repository: https://github.com/pheno-agency/qwik-slider
- Homepage: https://github.com/pheno-agency/qwik-slider#readme
- Issues: https://github.com/pheno-agency/qwik-slider/issues
- npm.io page: https://npm.io/package/qwik-slider

## 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.1.0 (latest) — 2023-10-21
- 1.0.2 — 2023-10-17
- 1.0.1 — 2023-10-17
- 1.0.0 — 2023-10-17

## README

[![Pheno Agency](/banner.svg)](https://pheno.agency)

# qwik-slider

Hey there! 👋 Thanks for checking out the qwik-slider, a simple and customizable way to add horizontal scrolling to your web pages.

## Installation

To get started, you'll need to install package if you haven't already. You can do this with npm.

```bash
npm install qwik-slider
```

## Usage

Now that you're all set up, let's see how you can use the Slider component to add scrollable content to your website.

```ts
import { Slider } from "qwik-slider";

export const MyComponent = component$(() => {

  return(
    <Slider>
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </Slider>
  )
}

```

You can pass in various options to customize the behavior of your slider. Here are some of the available options:

| Option          | Default value | Description                               |
| --------------- | ------------- | ----------------------------------------- |
| scrollSpeed     | 1             | Adjust the scroll speed                   |
| gap             | 15 (px)       | Set the gap between items                 |
| showScrollbar   | true          | Control the visibility of the scrollbar   |
| autoScroll      | false         | Enable or disable auto-scrolling          |
| autoScrollSpeed | 15            | Adjust the speed of auto-scrolling        |
| width           | ""            | Adjust the width of the slider            |
| styleClass      | ""            | Styling the slider by providing the class |

## Customization

Feel free to style your slider by applying the CSS class name to the slider component. You can also pass in a `settings` object to configure your slider in one place:

```ts
import { Slider } from "qwik-slider";

export const MyComponent = component$(() => {

  const sliderSettings = {
    scrollSpeed: 5,
    gap: 20,
    showScrollbar: false,
    autoScroll: true,
    autoScrollSpeed: 10,
  }

return (
  <Slider {...sliderSettings}>
    <Cards /> // your cards go here
  </Slider>
)
};


```

## Pause on Hover

If you want your slider to pause when someone hovers their mouse over it, you're in luck! The Slider component has got you covered. Just hover your mouse over it, and it will pause. Move the mouse away, and it will start scrolling again.

## Looping

By default, your slider content will loop back to the start when it reaches the end. It's like an endless cycle, so your users won't miss a thing.

## Contributing

We welcome contributions from the developer community to help improve and enhance this package.

---

And that's it! The Slider component is a great way to add a dynamic and interactive element to your website. Have fun customizing and making your web pages scroll-tastic!

Happy coding! 🚀

---
_Source: https://npm.io/package/qwik-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._