swiper.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  1. import { h, ref, onMounted, onUpdated, onBeforeUnmount, watch, nextTick, provide } from 'vue';
  2. import SwiperCore from 'swiper';
  3. import { getParams } from '../components-shared/get-params.js';
  4. import { mountSwiper } from '../components-shared/mount-swiper.js';
  5. import { needsScrollbar, needsNavigation, needsPagination, uniqueClasses, extend, wrapperClass } from '../components-shared/utils.js';
  6. import { getChangedParams } from '../components-shared/get-changed-params.js';
  7. import { getChildren } from './get-children.js';
  8. import { updateSwiper } from '../components-shared/update-swiper.js';
  9. import { renderVirtual } from './virtual.js';
  10. import { updateOnVirtualData } from '../components-shared/update-on-virtual-data.js';
  11. const Swiper = {
  12. name: 'Swiper',
  13. props: {
  14. tag: {
  15. type: String,
  16. default: 'div'
  17. },
  18. wrapperTag: {
  19. type: String,
  20. default: 'div'
  21. },
  22. modules: {
  23. type: Array,
  24. default: undefined
  25. },
  26. init: {
  27. type: Boolean,
  28. default: undefined
  29. },
  30. direction: {
  31. type: String,
  32. default: undefined
  33. },
  34. oneWayMovement: {
  35. type: Boolean,
  36. default: undefined
  37. },
  38. touchEventsTarget: {
  39. type: String,
  40. default: undefined
  41. },
  42. initialSlide: {
  43. type: Number,
  44. default: undefined
  45. },
  46. speed: {
  47. type: Number,
  48. default: undefined
  49. },
  50. cssMode: {
  51. type: Boolean,
  52. default: undefined
  53. },
  54. updateOnWindowResize: {
  55. type: Boolean,
  56. default: undefined
  57. },
  58. resizeObserver: {
  59. type: Boolean,
  60. default: undefined
  61. },
  62. nested: {
  63. type: Boolean,
  64. default: undefined
  65. },
  66. focusableElements: {
  67. type: String,
  68. default: undefined
  69. },
  70. width: {
  71. type: Number,
  72. default: undefined
  73. },
  74. height: {
  75. type: Number,
  76. default: undefined
  77. },
  78. preventInteractionOnTransition: {
  79. type: Boolean,
  80. default: undefined
  81. },
  82. userAgent: {
  83. type: String,
  84. default: undefined
  85. },
  86. url: {
  87. type: String,
  88. default: undefined
  89. },
  90. edgeSwipeDetection: {
  91. type: [Boolean, String],
  92. default: undefined
  93. },
  94. edgeSwipeThreshold: {
  95. type: Number,
  96. default: undefined
  97. },
  98. autoHeight: {
  99. type: Boolean,
  100. default: undefined
  101. },
  102. setWrapperSize: {
  103. type: Boolean,
  104. default: undefined
  105. },
  106. virtualTranslate: {
  107. type: Boolean,
  108. default: undefined
  109. },
  110. effect: {
  111. type: String,
  112. default: undefined
  113. },
  114. breakpoints: {
  115. type: Object,
  116. default: undefined
  117. },
  118. spaceBetween: {
  119. type: [Number, String],
  120. default: undefined
  121. },
  122. slidesPerView: {
  123. type: [Number, String],
  124. default: undefined
  125. },
  126. maxBackfaceHiddenSlides: {
  127. type: Number,
  128. default: undefined
  129. },
  130. slidesPerGroup: {
  131. type: Number,
  132. default: undefined
  133. },
  134. slidesPerGroupSkip: {
  135. type: Number,
  136. default: undefined
  137. },
  138. slidesPerGroupAuto: {
  139. type: Boolean,
  140. default: undefined
  141. },
  142. centeredSlides: {
  143. type: Boolean,
  144. default: undefined
  145. },
  146. centeredSlidesBounds: {
  147. type: Boolean,
  148. default: undefined
  149. },
  150. slidesOffsetBefore: {
  151. type: Number,
  152. default: undefined
  153. },
  154. slidesOffsetAfter: {
  155. type: Number,
  156. default: undefined
  157. },
  158. normalizeSlideIndex: {
  159. type: Boolean,
  160. default: undefined
  161. },
  162. centerInsufficientSlides: {
  163. type: Boolean,
  164. default: undefined
  165. },
  166. watchOverflow: {
  167. type: Boolean,
  168. default: undefined
  169. },
  170. roundLengths: {
  171. type: Boolean,
  172. default: undefined
  173. },
  174. touchRatio: {
  175. type: Number,
  176. default: undefined
  177. },
  178. touchAngle: {
  179. type: Number,
  180. default: undefined
  181. },
  182. simulateTouch: {
  183. type: Boolean,
  184. default: undefined
  185. },
  186. shortSwipes: {
  187. type: Boolean,
  188. default: undefined
  189. },
  190. longSwipes: {
  191. type: Boolean,
  192. default: undefined
  193. },
  194. longSwipesRatio: {
  195. type: Number,
  196. default: undefined
  197. },
  198. longSwipesMs: {
  199. type: Number,
  200. default: undefined
  201. },
  202. followFinger: {
  203. type: Boolean,
  204. default: undefined
  205. },
  206. allowTouchMove: {
  207. type: Boolean,
  208. default: undefined
  209. },
  210. threshold: {
  211. type: Number,
  212. default: undefined
  213. },
  214. touchMoveStopPropagation: {
  215. type: Boolean,
  216. default: undefined
  217. },
  218. touchStartPreventDefault: {
  219. type: Boolean,
  220. default: undefined
  221. },
  222. touchStartForcePreventDefault: {
  223. type: Boolean,
  224. default: undefined
  225. },
  226. touchReleaseOnEdges: {
  227. type: Boolean,
  228. default: undefined
  229. },
  230. uniqueNavElements: {
  231. type: Boolean,
  232. default: undefined
  233. },
  234. resistance: {
  235. type: Boolean,
  236. default: undefined
  237. },
  238. resistanceRatio: {
  239. type: Number,
  240. default: undefined
  241. },
  242. watchSlidesProgress: {
  243. type: Boolean,
  244. default: undefined
  245. },
  246. grabCursor: {
  247. type: Boolean,
  248. default: undefined
  249. },
  250. preventClicks: {
  251. type: Boolean,
  252. default: undefined
  253. },
  254. preventClicksPropagation: {
  255. type: Boolean,
  256. default: undefined
  257. },
  258. slideToClickedSlide: {
  259. type: Boolean,
  260. default: undefined
  261. },
  262. loop: {
  263. type: Boolean,
  264. default: undefined
  265. },
  266. loopedSlides: {
  267. type: Number,
  268. default: undefined
  269. },
  270. loopPreventsSliding: {
  271. type: Boolean,
  272. default: undefined
  273. },
  274. rewind: {
  275. type: Boolean,
  276. default: undefined
  277. },
  278. allowSlidePrev: {
  279. type: Boolean,
  280. default: undefined
  281. },
  282. allowSlideNext: {
  283. type: Boolean,
  284. default: undefined
  285. },
  286. swipeHandler: {
  287. type: Boolean,
  288. default: undefined
  289. },
  290. noSwiping: {
  291. type: Boolean,
  292. default: undefined
  293. },
  294. noSwipingClass: {
  295. type: String,
  296. default: undefined
  297. },
  298. noSwipingSelector: {
  299. type: String,
  300. default: undefined
  301. },
  302. passiveListeners: {
  303. type: Boolean,
  304. default: undefined
  305. },
  306. containerModifierClass: {
  307. type: String,
  308. default: undefined
  309. },
  310. slideClass: {
  311. type: String,
  312. default: undefined
  313. },
  314. slideActiveClass: {
  315. type: String,
  316. default: undefined
  317. },
  318. slideVisibleClass: {
  319. type: String,
  320. default: undefined
  321. },
  322. slideNextClass: {
  323. type: String,
  324. default: undefined
  325. },
  326. slidePrevClass: {
  327. type: String,
  328. default: undefined
  329. },
  330. wrapperClass: {
  331. type: String,
  332. default: undefined
  333. },
  334. lazyPreloaderClass: {
  335. type: String,
  336. default: undefined
  337. },
  338. lazyPreloadPrevNext: {
  339. type: Number,
  340. default: undefined
  341. },
  342. runCallbacksOnInit: {
  343. type: Boolean,
  344. default: undefined
  345. },
  346. observer: {
  347. type: Boolean,
  348. default: undefined
  349. },
  350. observeParents: {
  351. type: Boolean,
  352. default: undefined
  353. },
  354. observeSlideChildren: {
  355. type: Boolean,
  356. default: undefined
  357. },
  358. a11y: {
  359. type: [Boolean, Object],
  360. default: undefined
  361. },
  362. autoplay: {
  363. type: [Boolean, Object],
  364. default: undefined
  365. },
  366. controller: {
  367. type: Object,
  368. default: undefined
  369. },
  370. coverflowEffect: {
  371. type: Object,
  372. default: undefined
  373. },
  374. cubeEffect: {
  375. type: Object,
  376. default: undefined
  377. },
  378. fadeEffect: {
  379. type: Object,
  380. default: undefined
  381. },
  382. flipEffect: {
  383. type: Object,
  384. default: undefined
  385. },
  386. creativeEffect: {
  387. type: Object,
  388. default: undefined
  389. },
  390. cardsEffect: {
  391. type: Object,
  392. default: undefined
  393. },
  394. hashNavigation: {
  395. type: [Boolean, Object],
  396. default: undefined
  397. },
  398. history: {
  399. type: [Boolean, Object],
  400. default: undefined
  401. },
  402. keyboard: {
  403. type: [Boolean, Object],
  404. default: undefined
  405. },
  406. mousewheel: {
  407. type: [Boolean, Object],
  408. default: undefined
  409. },
  410. navigation: {
  411. type: [Boolean, Object],
  412. default: undefined
  413. },
  414. pagination: {
  415. type: [Boolean, Object],
  416. default: undefined
  417. },
  418. parallax: {
  419. type: [Boolean, Object],
  420. default: undefined
  421. },
  422. scrollbar: {
  423. type: [Boolean, Object],
  424. default: undefined
  425. },
  426. thumbs: {
  427. type: Object,
  428. default: undefined
  429. },
  430. virtual: {
  431. type: [Boolean, Object],
  432. default: undefined
  433. },
  434. zoom: {
  435. type: [Boolean, Object],
  436. default: undefined
  437. },
  438. grid: {
  439. type: [Object],
  440. default: undefined
  441. },
  442. freeMode: {
  443. type: [Boolean, Object],
  444. default: undefined
  445. },
  446. enabled: {
  447. type: Boolean,
  448. default: undefined
  449. }
  450. },
  451. emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', '_freeModeNoMomentumRelease', 'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'autoplayPause', 'autoplayResume', 'autoplayTimeLeft', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart', 'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick', 'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'init', 'keyPress', 'lock', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow', 'navigationPrev', 'navigationNext', 'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow', 'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll', 'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate', 'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd', 'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart', 'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove', 'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap', 'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart', 'unlock', 'update', 'virtualUpdate', 'zoomChange'],
  452. setup(props, _ref) {
  453. let {
  454. slots: originalSlots,
  455. emit
  456. } = _ref;
  457. const {
  458. tag: Tag,
  459. wrapperTag: WrapperTag
  460. } = props;
  461. const containerClasses = ref('swiper');
  462. const virtualData = ref(null);
  463. const breakpointChanged = ref(false);
  464. const initializedRef = ref(false);
  465. const swiperElRef = ref(null);
  466. const swiperRef = ref(null);
  467. const oldPassedParamsRef = ref(null);
  468. const slidesRef = {
  469. value: []
  470. };
  471. const oldSlidesRef = {
  472. value: []
  473. };
  474. const nextElRef = ref(null);
  475. const prevElRef = ref(null);
  476. const paginationElRef = ref(null);
  477. const scrollbarElRef = ref(null);
  478. const {
  479. params: swiperParams,
  480. passedParams
  481. } = getParams(props, false);
  482. getChildren(originalSlots, slidesRef, oldSlidesRef);
  483. oldPassedParamsRef.value = passedParams;
  484. oldSlidesRef.value = slidesRef.value;
  485. const onBeforeBreakpoint = () => {
  486. getChildren(originalSlots, slidesRef, oldSlidesRef);
  487. breakpointChanged.value = true;
  488. };
  489. swiperParams.onAny = function (event) {
  490. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  491. args[_key - 1] = arguments[_key];
  492. }
  493. emit(event, ...args);
  494. };
  495. Object.assign(swiperParams.on, {
  496. _beforeBreakpoint: onBeforeBreakpoint,
  497. _containerClasses(swiper, classes) {
  498. containerClasses.value = classes;
  499. }
  500. });
  501. // init Swiper
  502. const passParams = {
  503. ...swiperParams
  504. };
  505. delete passParams.wrapperClass;
  506. swiperRef.value = new SwiperCore(passParams);
  507. if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
  508. swiperRef.value.virtual.slides = slidesRef.value;
  509. const extendWith = {
  510. cache: false,
  511. slides: slidesRef.value,
  512. renderExternal: data => {
  513. virtualData.value = data;
  514. },
  515. renderExternalUpdate: false
  516. };
  517. extend(swiperRef.value.params.virtual, extendWith);
  518. extend(swiperRef.value.originalParams.virtual, extendWith);
  519. }
  520. onUpdated(() => {
  521. // set initialized flag
  522. if (!initializedRef.value && swiperRef.value) {
  523. swiperRef.value.emitSlidesClasses();
  524. initializedRef.value = true;
  525. }
  526. // watch for params change
  527. const {
  528. passedParams: newPassedParams
  529. } = getParams(props, false);
  530. const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value, c => c.props && c.props.key);
  531. oldPassedParamsRef.value = newPassedParams;
  532. if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
  533. updateSwiper({
  534. swiper: swiperRef.value,
  535. slides: slidesRef.value,
  536. passedParams: newPassedParams,
  537. changedParams,
  538. nextEl: nextElRef.value,
  539. prevEl: prevElRef.value,
  540. scrollbarEl: scrollbarElRef.value,
  541. paginationEl: paginationElRef.value
  542. });
  543. }
  544. breakpointChanged.value = false;
  545. });
  546. provide('swiper', swiperRef);
  547. // update on virtual update
  548. watch(virtualData, () => {
  549. nextTick(() => {
  550. updateOnVirtualData(swiperRef.value);
  551. });
  552. });
  553. // mount swiper
  554. onMounted(() => {
  555. if (!swiperElRef.value) return;
  556. mountSwiper({
  557. el: swiperElRef.value,
  558. nextEl: nextElRef.value,
  559. prevEl: prevElRef.value,
  560. paginationEl: paginationElRef.value,
  561. scrollbarEl: scrollbarElRef.value,
  562. swiper: swiperRef.value
  563. }, swiperParams);
  564. emit('swiper', swiperRef.value);
  565. });
  566. onBeforeUnmount(() => {
  567. if (swiperRef.value && !swiperRef.value.destroyed) {
  568. swiperRef.value.destroy(true, false);
  569. }
  570. });
  571. // bypass swiper instance to slides
  572. function renderSlides(slides) {
  573. if (swiperParams.virtual) {
  574. return renderVirtual(swiperRef, slides, virtualData.value);
  575. }
  576. slides.forEach((slide, index) => {
  577. if (!slide.props) slide.props = {};
  578. slide.props.swiperRef = swiperRef;
  579. slide.props.swiperSlideIndex = index;
  580. });
  581. return slides;
  582. }
  583. return () => {
  584. const {
  585. slides,
  586. slots
  587. } = getChildren(originalSlots, slidesRef, oldSlidesRef);
  588. return h(Tag, {
  589. ref: swiperElRef,
  590. class: uniqueClasses(containerClasses.value)
  591. }, [slots['container-start'], h(WrapperTag, {
  592. class: wrapperClass(swiperParams.wrapperClass)
  593. }, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), needsNavigation(props) && [h('div', {
  594. ref: prevElRef,
  595. class: 'swiper-button-prev'
  596. }), h('div', {
  597. ref: nextElRef,
  598. class: 'swiper-button-next'
  599. })], needsScrollbar(props) && h('div', {
  600. ref: scrollbarElRef,
  601. class: 'swiper-scrollbar'
  602. }), needsPagination(props) && h('div', {
  603. ref: paginationElRef,
  604. class: 'swiper-pagination'
  605. }), slots['container-end']]);
  606. };
  607. }
  608. };
  609. export { Swiper };