61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
/**
|
|
* Content carousel (slider) with extensive options to control behaviour and appearance
|
|
* @requires https://swiperjs.com/
|
|
*/
|
|
|
|
import Swiper from 'swiper/bundle'
|
|
|
|
export default (() => {
|
|
// Get all elements with the 'swiper' class
|
|
const carousels = document.querySelectorAll('[data-swiper]')
|
|
|
|
if (carousels.length === 0) return
|
|
|
|
// Iterate over each element using the built-in forEach method
|
|
/* eslint-disable no-unused-vars */
|
|
carousels.forEach((value, index) => {
|
|
let options, images
|
|
|
|
// Parse swiper options from the data attribute
|
|
if (value.dataset.swiper !== undefined && value.dataset.swiper !== '') {
|
|
options = JSON.parse(value.dataset.swiper)
|
|
images = options?.thumbnails?.images
|
|
}
|
|
|
|
// Create a new Swiper instance
|
|
/* eslint-disable no-undef */
|
|
const swiper = new Swiper(value, options)
|
|
/* eslint-enable no-undef */
|
|
|
|
// Check if a controlled slider is specified
|
|
if (options?.controlSlider) {
|
|
let controlledSliders = []
|
|
|
|
if (Array.isArray(options.controlSlider)) {
|
|
// Handle multiple sliders
|
|
controlledSliders = options.controlSlider.map((selector) =>
|
|
document.querySelector(selector)
|
|
)
|
|
} else {
|
|
// Handle single slider
|
|
controlledSliders.push(document.querySelector(options.controlSlider))
|
|
}
|
|
|
|
const swiperControlledInstances = controlledSliders.map(
|
|
(controlledSlider) => {
|
|
const controlledSliderOptions =
|
|
controlledSlider?.dataset.swiper &&
|
|
JSON.parse(controlledSlider.dataset.swiper)
|
|
|
|
// Create a new Swiper instance for each controlled slider
|
|
/* eslint-disable no-undef */
|
|
return new Swiper(controlledSlider, controlledSliderOptions)
|
|
/* eslint-enable no-undef */
|
|
}
|
|
)
|
|
|
|
swiper.controller.control = swiperControlledInstances
|
|
}
|
|
})
|
|
})()
|