preact-glide
v1.1.8
Published
A simple wrapper for creating Glide JS carousels with Preact components
Downloads
5
Readme
Preact Glide
A simple wrapper for creating Glide JS carousels with Preact components
Contents
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 classarrows
- Override default component
const { Arrows } = require('preact-glide/components')
const App = () => {
return <Arrows />
}
Bullets
glideClass
- Override default glide classbullets
- Override default componentchildren
- 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 classcontrols
- Override default component
const { Controls } = require('preact-glide/components')
const App = () => {
return <Controls />
}
Title
glideClass
- Override default glide classtitle
- Component or string to be rendered
const { Title } = require('preact-glide/components')
const App = () => {
return <Title />
}
Track
glideClass
- Override default glide classchildren
- 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 elementglideOptions
- 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.
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