https://github.com/tflx/slider-controller

https://github.com/tflx/slider-controller

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/tflx/slider-controller
• Owner: tflx
• Created: 2023-10-13T14:52:32.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-29T08:39:48.000Z (11 months ago)
• Last Synced: 2024-01-29T10:23:00.535Z (11 months ago)
• Language: TypeScript
• Size: 43 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Slider Controller

The `SliderController` is a custom web component built using the `LitElement` library. It provides a slider functionality for a collection of `SlideItem` elements.

## Installation

You can install the `SliderController` using npm.

```bash

npm install slider-controller

```

Then, you need to import the `SliderController` and `SlideItem` in your project.

```typescript

import "slider-controller"

import "slide-item"

```

## Usage

To use the `SliderController`, you need to include it in your HTML as a custom element. The `SlideItem` elements should be nested inside the `SliderController`.

```html

  Slide 1

  Slide 2

  Slide 3

  

```

Each `SlideItem` represents a single slide in the slider. You can put any content inside a `SlideItem`.

The `SliderController` automatically handles the scrolling behavior of the slides. It also emits custom events `SLIDER_SCROLLING` and `SLIDER_SCROLLING_DONE` which you can listen to for custom behavior.

## Methods

| Method     | Type      | Description                  |

| ---------- | --------- | ---------------------------- |

| next()    | method  | Slides to next slide-item |

| previous() | method | Slides to previous slide-item        |

## Getters

| Method     | Type      | Description                  |

| ---------- | --------- | ---------------------------- |

| currentIndex    | getter  | Gets the current index of the active slider |

| totalItems | getter | Gets the total number of slide-items        |

| hasPrevious | getter | Is there a previous slide-item? Good for disabling buttons fx.        |

| hasNext | getter | Is there a next slide-item? Good for disabling buttons fx.        |

## Event Listeners

| Event     | Type      | Description                  |

| ---------- | --------- | ---------------------------- |

| SLIDER_SCROLLING    | event  | Fires on each DOM scroll event |

| SLIDER_SCROLLING_DONE    | event  | Fires after scroll is done |

## Cleanup

The `SliderController` automatically cleans up its event listeners when it is disconnected from the DOM. You don't need to manually remove the event listeners.

## Note

The `SliderController` uses a debounced scroll and resize event to improve performance. The debounce delay is currently set to 300ms.

## Styling

The `SliderController` component uses CSS variables for some of its styles, which you can override in your own CSS. Here's how you can do it:

1. `--slider-controller-gap`: This variable controls the gap between the slides. You can set it to any valid CSS length value. For example, to set the gap to 20px, you would do:

```css

slider-controller {

  --slider-controller-gap: 20px;

}

```

2. `--slider-controller-item-size`: This variable controls the size of the slides. You can set it to any valid CSS length value. The default is auto meaning that the items retain their natural size. For example, to set the size to 200px, you would do:

```css

slider-controller {

  --slider-controller-item-size: 200px;

}

```

Note that these variables should be set on the `slider-controller` element itself, not on the `:host` selector inside the `slider-controller`'s CSS.

In addition to these variables, you can also apply any other CSS styles to the `slider-controller` element as you would with any other HTML element. However, keep in mind that due to the Shadow DOM, styles applied outside the `slider-controller` will not affect the internal elements of the `slider-controller` (like the `.container` div). If you need to style these internal elements, you would need to modify the `slider-controller.css.ts` file directly.