/
flickity-package.js
53 lines (43 loc) · 1.48 KB
/
flickity-package.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
* Flickity Package
* @param element (string) =
*/
import Flickity from 'flickity'
import 'flickity-imagesloaded'
const flickityPackage = () => {
const flickityDefaults = {
accessibility: false,
contain: true,
imagesLoaded: true,
lazyLoad: false
}
const slider = document.querySelector('.js-imageSlider')
if (slider !== null) {
window.addEventListener('load', () => {
setTimeout(() => {
const sliders = Array.from(document.querySelectorAll('.js-imageSlider'))
if (sliders) {
sliders.forEach((slider) => {
// Check if outer transport Wrapper is used
let flkty
// If Slidertransport is not used as Wrapper yield data from the main slider wrapper
const sliderTransport = slider.querySelector('.flickity-custom__transport') || slider
// Check if the right Data Attr is available, otherwise use an empty object
const preCustomData =
sliderTransport.hasAttribute('data-myflickity')
? JSON.parse(sliderTransport.dataset.myflickity)
: {}
// Merging with Defaults
const customData = Object.assign(flickityDefaults, preCustomData)
// Init Flickity
flkty = new Flickity(sliderTransport, customData)
// Fix Height
flkty.resize()
slider.classList.add('is-visible')
})
}
}, 250)
})
}
}
export default flickityPackage