wtc-gallery-component

A minimal, touch-enabled content switcher, with options for autoplay, pagination, and more.

Install

``sh
$ npm install wtc-gallery-component
`

Usage

Import it into your project.

`javascript
import Gallery from "wtc-gallery-component";
`

Include the stylesheet if desired. This can be found in the dist/ folder, or you can import it directly into your stylesheet:

`scss
@import "~wtc-gallery-component";
`

Add your markup.

`html



`

You now have 2 options to initalize the component.

$3

If you are using [wtc-controller-element] just add data-controller="Gallery" to your markup, and ensure that ExecuteControllers.instanciateAll() is being called somewhere globally.

`html



`

You can also instantiate the component explicitly:

`javascript
ExecuteControllers.instanciate(document.getElementById("gallery"), Gallery);
`

$3

With the default JS version, you have the option to pass the options as an object, or use data-attributes—they both work.
If you choose to pass the options to the instance, you get a few extra hooks: onLoad, onWillChange, and onHasChanged.

`javascript
let gallery = new Gallery(document.getElementById("gallery"), {
nav: true,
autoplay: true,
delay: 5000,
onLoad: null,
onWillChange: function(instance, direction) {
// run some code before a slide change
},
onHasChanged: function(currentItem, previousItem, instance) {
// run some code after a slide change
},
});
`

Options

There are many more options you can pass in to the component:

- nav: Boolean. Toggles next/previous buttons. Defaults to false.
- autoplay: Boolean. Auto-starts the gallery transitions. Defaults to false.
- delay: Number. The delay (in milliseconds) between gallery item transitions. Defaults to 5000.
- pauseOnHover: Boolean. Pauses autoplay when a pointing device is within the gallery area. Defaults to false.
- loop: Boolean. Enables left or right navigation, when the user reaches the first or last gallery item, respectively. Defaults to false.
- draggable: Boolean. Allows for a basic swipe/drag to advance gallery items. Defaults to false.
- dragThreshold: Number. Minimum pixel amount for a drag action to advance the slideshow. Defaults to 40 pixels.
- pagination: Boolean. Sets up a navigation list of the gallery items. If paginationTarget (below) is specified, you can pass in your own list of elements to use; otherwise a bare bones list will be set up for you. Defaults to false.
- paginationTarget: String. CSS selector to integrates as navigation for the gallery items. Pagination items will be created from the immediate children of the given element. Defaults to null.
- nextBtnMarkup: String. Markup to override the default "next button" content.
- prevBtnMarkup: String. Markup to override the default "previous button" content.
- liveRegionText: String. Markup to override the default aria-live region content.
- THE FOLLOWING OPTIONS ARE ONLY AVAILABLE WHEN USING THE new KEYWORD TO INSTANTIATE:
- onLoad: Function. Fires after all images were preloaded, and the gallery is initiated.
- onWillChange: Function. Fires before a gallery transition event happens. Accepts two parameters: instance and direction (direction will be true or false, based on whether it's next or previous).
- onHasChanged: Function. Fires immediately after the transition event happens (does not wait for animations). Accepts three parameters: currentItem, previousItem, and instance.

If setting options via data-attributes in the markup, change camelCase to kebab-case. For example, pauseOnHover would become data-pause-on-hover.
For custom pagination, a valid CSS selector is needed—i.e. data-pagination-target=".my-custom-pagination". It does not matter where in the markup this element is; if you're using multiple Galleries, give your pagination items unique classes or IDs.

Customize!

The following example uses custom pagination, as well as some other nifty options:

`html
data-controller="Gallery"
data-nav="true"
data-autoplay="true"
data-delay="6000"
data-loop="true"
data-pause-on-hover="true"
data-draggable="true"
data-pagination="true"
data-pagination-target=".my-custom-pagination"
>


• 
  
  


• 
  
  


• 
  
  




• 
  Item 1 🐼 (could be an image, more markup… could be anything!)
  


• 
  Item 2 🦊
  


• 
  Item 3 🐍