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
|
/**
* External dependencies
*/
import { mapValues, merge } from 'lodash';
/**
* Internal dependencies
*/
import './style.scss';
export default async function createSwiper(
container = '.swiper-container',
params = {},
callbacks = {}
) {
const defaultParams = {
effect: 'slide',
grabCursor: true,
init: true,
initialSlide: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
bulletElement: 'button',
clickable: true,
el: '.swiper-pagination',
type: 'bullets',
},
preventClicksPropagation: false /* Necessary for normal block interactions */,
releaseFormElements: false,
setWrapperSize: true,
touchStartPreventDefault: false,
on: mapValues(
callbacks,
callback =>
function() {
callback( this );
}
),
};
const [ { default: Swiper } ] = await Promise.all( [
import( /* webpackChunkName: "swiper" */ 'swiper/dist/js/swiper.js' ),
import( /* webpackChunkName: "swiper" */ 'swiper/dist/css/swiper.css' ),
] );
return new Swiper( container, merge( {}, defaultParams, params ) );
}
|