Preact Glide

A simple wrapper for creating Glide JS carousels with Preact components

Contents

• Preact Glide
  • Contents
  • Installation
  • Basic Example
  • Styles
    • Component
    • Import
      • Less Import
      • Scss Import
  • Props
    • glideClass
    • glideOptions
    • glideComponents
    • glideEvents
    • arrows
    • bullets
    • controls
    • styles
    • title
  • Slide Events
    • onView
    • onClick
  • Components
    • Arrows
    • Bullets
    • Container
    • Controls
    • Title
    • Track
  • Hooks
    • useGlide

Installation

npm install preact-glide

Basic Example

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Styles

Component

Automatically include styles. Uses glideClass if set.

const App = () => {
  return <Carousel styles>{slides}</Carousel>
}

Import

Less Import

@import './node_modules/preact-glide/styles/carousel.less';

Overriding default className

In the case that you are using a non-standard className (when overriding glideClass prop) you can override the default @glideClass less variable as follows:

@import './node_modules/preact-glide/styles/carousel.less';
@glideClass: ~'.new-class';

Scss Import

@import './node_modules/preact-glide/styles/carousel.scss';

Overriding default className

In the case that you are using a non-standard className (when overriding glideClass prop) you can override the default $glideClass less variable as follows:

@import './node_modules/preact-glide/styles/carousel.scss';
$glideClass: '.new-class';

Props

glideClass

(String)

Used to override the default Glide className glide.

Example:

const App = () => {
  return (
    <Carousel glideClass={'new-class'}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

glideOptions

(Object)

Glide JS options object: https://glidejs.com/docs/options/

glideComponents

(Object)

Glide JS Components object: https://glidejs.com/docs/extending-components/

glideEvents

(Array)

List of Glide events with callbacks. Events are passed in the following format:

{
  event: '' // Event name
  cb: () => {} // Callback function
}

Example:

const glideEvents = [
  {
    event: 'run.after'
    cb: () => alert('Hello, world!')
  }
]

arrows

(Boolean | Component)

Set true to use default component.

Example (Default):

const App = () => {
  return (
    <Carousel arrows>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Example (Custom Component):

const CustomArrows = () => <div>Arrows</div>

const App = () => {
  return (
    <Carousel arrows={<CustomArrows />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

bullets

(Boolean | Component)

Set true to use default component.

Example (Default):

const App = () => {
  return (
    <Carousel bullets>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Example (Custom Component):

const CustomBullets = () => <div>Bullets</div>

const App = () => {
  return (
    <Carousel bullets={<CustomBullets />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

controls

(Boolean | Component)

Set true to use default component.

Example (Default):

const App = () => {
  return (
    <Carousel controls>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Example (Custom Component):

const CustomControls = () => <div>Controls</div>

const App = () => {
  return (
    <Carousel controls={<CustomControls />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

styles

(Boolean)

Set true to include default styles - uses glideClass by default.

Example:

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel styles>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

title

(Component)

Used to pass in a component that sits above the carousel.

Example:

const Carousel = require('preact-glide')

const Title = () => <div>Title</div>

const App = () => {
  return (
    <Carousel title={<Title />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Slide Events

onView

A function that will fire when the slide comes into view.

Note: The onView prop must be on the top most element.

Example:

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel>
      {slides.map(slide => (
        <div onView={() => alert('Viewed')}>Slide</div>
      ))}
    </Carousel>
  )
}

onClick

Bypasses a slight bug with GlideJs where dragging the top most element would also count as a 'click'.

Overrides the default onClick property on the top most element. Fires the function only when a 'click' occurs, not on 'drag'.

Note: Only overrides the onClick for the top most element.

Example:

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel>
      {slides.map(slide => (
        <div onClick={() => alert('Clicked')}>Slide</div>
      ))}
    </Carousel>
  )
}

Components

Single components can be exported from preact-glide/components

const {
  Arrows,
  Bullets,
  Container,
  Controls,
  Title,
  Track
} = require('preact-glide/components')

Arrows

• glideClass - Override default glide class
• arrows - Override default component

const { Arrows } = require('preact-glide/components')

const App = () => {
  return <Arrows />
}

Bullets

• glideClass - Override default glide class
• bullets - Override default component
• children - Array of Slides

const { Bullets } = require('preact-glide/components')

const App = () => {
  return <Bullets>{arrayOfSlides}</Bullets>
}

Container

• glideClass - Override default glide class

const { Container } = require('preact-glide/components')

const App = () => {
  return <Container />
}

Controls

• glideClass - Override default glide class
• controls - Override default component

const { Controls } = require('preact-glide/components')

const App = () => {
  return <Controls />
}

Title

• glideClass - Override default glide class
• title - Component or string to be rendered

const { Title } = require('preact-glide/components')

const App = () => {
  return <Title />
}

Track

• glideClass - Override default glide class
• children - Array of Slides

const { Track } = require('preact-glide/components')

const App = () => {
  return (
    <Track>
      {arrayOfSlides}
    <Track/>
  )
}

Hooks

The hooks can be exported from preact-glide/hooks

const { useGlide } = require('preact-glide/hooks')

useGlide

Takes an object as a parameter with the following properties

• carouselRef - (required) useRef reference to carousel element
• glideOptions - Glide JS options object: https://glidejs.com/docs/options/
• glideComponents - Glide JS Components object: https://glidejs.com/docs/extending-components/
• glideEvents - List of Glide events with callbacks.
• slides - List of slides

const { useGlide } = require('preact-glide/hooks')

const App = () => {
  const carouselRef = useRef()

  useGlide({ carouselRef })

  return (
    <div className={`glide`} ref={carouselRef}>
      <div className={`glide__track`} data-glide-el='track'>
        <ul className={`glide__slides`}>
          <li className={`glide__slide`}>Slide</li>
        </ul>
      </div>
    </div>
  )
}

Note: HTML structure inside carouselRef will need to contain the glide structure and classes