https://github.com/chrismademe/scooch

👩‍💻 A really simply CSS & JS slideshow
https://github.com/chrismademe/scooch

Last synced: about 1 month ago
JSON representation

👩‍💻 A really simply CSS & JS slideshow

• Host: GitHub
• URL: https://github.com/chrismademe/scooch
• Owner: chrismademe
• License: other
• Created: 2020-02-05T10:35:14.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-10-31T09:27:19.000Z (over 2 years ago)
• Last Synced: 2024-04-26T14:05:20.464Z (10 months ago)
• Language: JavaScript
• Size: 33.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Scooch

Scooch makes slideshows easy. You bring your own content and styling (aside from some functional styles to make Scooch work). It's super lightweight, around 1.5kb gzipped and easy to customise.

## Installation

You can either download the repo, grab the JS and CSS and link them in your HTML, or if you prefer, you can install via NPM:

```bash

npm install scoochjs --save

```

## Usage

See demo in `index.html` for a setup guide.

## Options

You can pass an optional object to set any of the below items, as the second parameter, when instantiating Scooch.

e.g.

```javascript

new Scooch(element, { autoplay: false });

```

| Key                | Description                                                | Default Value |

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

| `autoplay`         | Move to the next slide automatically                       | `false`       |

| `autoplayInterval` | How often (in MS) to change slide, if `autoplay` is `true` | `5000`        |

| `keyboardControls` | Enable keyboard controls                                   | `true`        |

| `enableFullscreen` | Allow the slideshow to be made fullscreen                  | `true`        |

| `scrollToChange`   | Move to next/previous slides by scrolling                  | `true`        |

| `swipeToChange`    | Move to next/previous slides by swiping on a touch device  | `true`        |

## Methods

| Method             | Description                                                                   |

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

| `next()`           | Go to the next slide                                                          |

| `previous()`       | Go to the previous slide                                                      |

| `goToSlide(index)` | Go to specific slide. `index` should be the array index of the slide to goto. |

## Keyboard Controls

-  Next Slide: `Right arrow`, `space`

-  Previous Slide: `Left arrow`

-  Enter Fullscreen: `F`

-  Exit Fullscreen: `esc`

## Roadmap

[x] Add lifecycle events (e.g. `init`, `onSlideChange` etc.) - _added in 1.1.0_

[ ] Make fullscreen only affect slideshow element