swiper-vue.mjs 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838
  1. /**
  2. * Swiper Vue 11.2.10
  3. * Most modern mobile touch slider and framework with hardware accelerated transitions
  4. * https://swiperjs.com
  5. *
  6. * Copyright 2014-2025 Vladimir Kharlampidi
  7. *
  8. * Released under the MIT License
  9. *
  10. * Released on: June 28, 2025
  11. */
  12. import { h, ref, onUpdated, provide, watch, nextTick, onMounted, onBeforeUnmount, onBeforeUpdate, computed, inject } from 'vue';
  13. import { S as Swiper$1 } from './shared/swiper-core.mjs';
  14. import { g as getParams, a as getChangedParams, u as updateOnVirtualData, m as mountSwiper } from './shared/update-on-virtual-data.mjs';
  15. import { e as extend, u as updateSwiper, d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination } from './shared/update-swiper.mjs';
  16. function getChildren(originalSlots, slidesRef, oldSlidesRef) {
  17. if (originalSlots === void 0) {
  18. originalSlots = {};
  19. }
  20. const slides = [];
  21. const slots = {
  22. 'container-start': [],
  23. 'container-end': [],
  24. 'wrapper-start': [],
  25. 'wrapper-end': []
  26. };
  27. const getSlidesFromElements = (els, slotName) => {
  28. if (!Array.isArray(els)) {
  29. return;
  30. }
  31. els.forEach(vnode => {
  32. const isFragment = typeof vnode.type === 'symbol';
  33. if (slotName === 'default') slotName = 'container-end';
  34. if (isFragment && vnode.children) {
  35. getSlidesFromElements(vnode.children, slotName);
  36. } else if (vnode.type && (vnode.type.name === 'SwiperSlide' || vnode.type.name === 'AsyncComponentWrapper') || vnode.componentOptions && vnode.componentOptions.tag === 'SwiperSlide') {
  37. slides.push(vnode);
  38. } else if (slots[slotName]) {
  39. slots[slotName].push(vnode);
  40. }
  41. });
  42. };
  43. Object.keys(originalSlots).forEach(slotName => {
  44. if (typeof originalSlots[slotName] !== 'function') return;
  45. const els = originalSlots[slotName]();
  46. getSlidesFromElements(els, slotName);
  47. });
  48. oldSlidesRef.value = slidesRef.value;
  49. slidesRef.value = slides;
  50. return {
  51. slides,
  52. slots
  53. };
  54. }
  55. function renderVirtual(swiperRef, slides, virtualData) {
  56. if (!virtualData) return null;
  57. const getSlideIndex = index => {
  58. let slideIndex = index;
  59. if (index < 0) {
  60. slideIndex = slides.length + index;
  61. } else if (slideIndex >= slides.length) {
  62. // eslint-disable-next-line
  63. slideIndex = slideIndex - slides.length;
  64. }
  65. return slideIndex;
  66. };
  67. const style = swiperRef.value.isHorizontal() ? {
  68. [swiperRef.value.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`
  69. } : {
  70. top: `${virtualData.offset}px`
  71. };
  72. const {
  73. from,
  74. to
  75. } = virtualData;
  76. const loopFrom = swiperRef.value.params.loop ? -slides.length : 0;
  77. const loopTo = swiperRef.value.params.loop ? slides.length * 2 : slides.length;
  78. const slidesToRender = [];
  79. for (let i = loopFrom; i < loopTo; i += 1) {
  80. if (i >= from && i <= to && slidesToRender.length < slides.length) {
  81. slidesToRender.push(slides[getSlideIndex(i)]);
  82. }
  83. }
  84. return slidesToRender.map(slide => {
  85. if (!slide.props) slide.props = {};
  86. if (!slide.props.style) slide.props.style = {};
  87. slide.props.swiperRef = swiperRef;
  88. slide.props.style = style;
  89. if (slide.type) {
  90. return h(slide.type, {
  91. ...slide.props
  92. }, slide.children);
  93. } else if (slide.componentOptions) {
  94. return h(slide.componentOptions.Ctor, {
  95. ...slide.props
  96. }, slide.componentOptions.children);
  97. }
  98. });
  99. }
  100. const Swiper = {
  101. name: 'Swiper',
  102. props: {
  103. tag: {
  104. type: String,
  105. default: 'div'
  106. },
  107. wrapperTag: {
  108. type: String,
  109. default: 'div'
  110. },
  111. modules: {
  112. type: Array,
  113. default: undefined
  114. },
  115. init: {
  116. type: Boolean,
  117. default: undefined
  118. },
  119. direction: {
  120. type: String,
  121. default: undefined
  122. },
  123. oneWayMovement: {
  124. type: Boolean,
  125. default: undefined
  126. },
  127. swiperElementNodeName: {
  128. type: String,
  129. default: 'SWIPER-CONTAINER'
  130. },
  131. touchEventsTarget: {
  132. type: String,
  133. default: undefined
  134. },
  135. initialSlide: {
  136. type: Number,
  137. default: undefined
  138. },
  139. speed: {
  140. type: Number,
  141. default: undefined
  142. },
  143. cssMode: {
  144. type: Boolean,
  145. default: undefined
  146. },
  147. updateOnWindowResize: {
  148. type: Boolean,
  149. default: undefined
  150. },
  151. resizeObserver: {
  152. type: Boolean,
  153. default: undefined
  154. },
  155. nested: {
  156. type: Boolean,
  157. default: undefined
  158. },
  159. focusableElements: {
  160. type: String,
  161. default: undefined
  162. },
  163. width: {
  164. type: Number,
  165. default: undefined
  166. },
  167. height: {
  168. type: Number,
  169. default: undefined
  170. },
  171. preventInteractionOnTransition: {
  172. type: Boolean,
  173. default: undefined
  174. },
  175. userAgent: {
  176. type: String,
  177. default: undefined
  178. },
  179. url: {
  180. type: String,
  181. default: undefined
  182. },
  183. edgeSwipeDetection: {
  184. type: [Boolean, String],
  185. default: undefined
  186. },
  187. edgeSwipeThreshold: {
  188. type: Number,
  189. default: undefined
  190. },
  191. autoHeight: {
  192. type: Boolean,
  193. default: undefined
  194. },
  195. setWrapperSize: {
  196. type: Boolean,
  197. default: undefined
  198. },
  199. virtualTranslate: {
  200. type: Boolean,
  201. default: undefined
  202. },
  203. effect: {
  204. type: String,
  205. default: undefined
  206. },
  207. breakpoints: {
  208. type: Object,
  209. default: undefined
  210. },
  211. breakpointsBase: {
  212. type: String,
  213. default: undefined
  214. },
  215. spaceBetween: {
  216. type: [Number, String],
  217. default: undefined
  218. },
  219. slidesPerView: {
  220. type: [Number, String],
  221. default: undefined
  222. },
  223. maxBackfaceHiddenSlides: {
  224. type: Number,
  225. default: undefined
  226. },
  227. slidesPerGroup: {
  228. type: Number,
  229. default: undefined
  230. },
  231. slidesPerGroupSkip: {
  232. type: Number,
  233. default: undefined
  234. },
  235. slidesPerGroupAuto: {
  236. type: Boolean,
  237. default: undefined
  238. },
  239. centeredSlides: {
  240. type: Boolean,
  241. default: undefined
  242. },
  243. centeredSlidesBounds: {
  244. type: Boolean,
  245. default: undefined
  246. },
  247. slidesOffsetBefore: {
  248. type: Number,
  249. default: undefined
  250. },
  251. slidesOffsetAfter: {
  252. type: Number,
  253. default: undefined
  254. },
  255. normalizeSlideIndex: {
  256. type: Boolean,
  257. default: undefined
  258. },
  259. centerInsufficientSlides: {
  260. type: Boolean,
  261. default: undefined
  262. },
  263. watchOverflow: {
  264. type: Boolean,
  265. default: undefined
  266. },
  267. roundLengths: {
  268. type: Boolean,
  269. default: undefined
  270. },
  271. touchRatio: {
  272. type: Number,
  273. default: undefined
  274. },
  275. touchAngle: {
  276. type: Number,
  277. default: undefined
  278. },
  279. simulateTouch: {
  280. type: Boolean,
  281. default: undefined
  282. },
  283. shortSwipes: {
  284. type: Boolean,
  285. default: undefined
  286. },
  287. longSwipes: {
  288. type: Boolean,
  289. default: undefined
  290. },
  291. longSwipesRatio: {
  292. type: Number,
  293. default: undefined
  294. },
  295. longSwipesMs: {
  296. type: Number,
  297. default: undefined
  298. },
  299. followFinger: {
  300. type: Boolean,
  301. default: undefined
  302. },
  303. allowTouchMove: {
  304. type: Boolean,
  305. default: undefined
  306. },
  307. threshold: {
  308. type: Number,
  309. default: undefined
  310. },
  311. touchMoveStopPropagation: {
  312. type: Boolean,
  313. default: undefined
  314. },
  315. touchStartPreventDefault: {
  316. type: Boolean,
  317. default: undefined
  318. },
  319. touchStartForcePreventDefault: {
  320. type: Boolean,
  321. default: undefined
  322. },
  323. touchReleaseOnEdges: {
  324. type: Boolean,
  325. default: undefined
  326. },
  327. uniqueNavElements: {
  328. type: Boolean,
  329. default: undefined
  330. },
  331. resistance: {
  332. type: Boolean,
  333. default: undefined
  334. },
  335. resistanceRatio: {
  336. type: Number,
  337. default: undefined
  338. },
  339. watchSlidesProgress: {
  340. type: Boolean,
  341. default: undefined
  342. },
  343. grabCursor: {
  344. type: Boolean,
  345. default: undefined
  346. },
  347. preventClicks: {
  348. type: Boolean,
  349. default: undefined
  350. },
  351. preventClicksPropagation: {
  352. type: Boolean,
  353. default: undefined
  354. },
  355. slideToClickedSlide: {
  356. type: Boolean,
  357. default: undefined
  358. },
  359. loop: {
  360. type: Boolean,
  361. default: undefined
  362. },
  363. loopedSlides: {
  364. type: Number,
  365. default: undefined
  366. },
  367. loopPreventsSliding: {
  368. type: Boolean,
  369. default: undefined
  370. },
  371. loopAdditionalSlides: {
  372. type: Number,
  373. default: undefined
  374. },
  375. loopAddBlankSlides: {
  376. type: Boolean,
  377. default: undefined
  378. },
  379. rewind: {
  380. type: Boolean,
  381. default: undefined
  382. },
  383. allowSlidePrev: {
  384. type: Boolean,
  385. default: undefined
  386. },
  387. allowSlideNext: {
  388. type: Boolean,
  389. default: undefined
  390. },
  391. swipeHandler: {
  392. type: Boolean,
  393. default: undefined
  394. },
  395. noSwiping: {
  396. type: Boolean,
  397. default: undefined
  398. },
  399. noSwipingClass: {
  400. type: String,
  401. default: undefined
  402. },
  403. noSwipingSelector: {
  404. type: String,
  405. default: undefined
  406. },
  407. passiveListeners: {
  408. type: Boolean,
  409. default: undefined
  410. },
  411. containerModifierClass: {
  412. type: String,
  413. default: undefined
  414. },
  415. slideClass: {
  416. type: String,
  417. default: undefined
  418. },
  419. slideActiveClass: {
  420. type: String,
  421. default: undefined
  422. },
  423. slideVisibleClass: {
  424. type: String,
  425. default: undefined
  426. },
  427. slideFullyVisibleClass: {
  428. type: String,
  429. default: undefined
  430. },
  431. slideBlankClass: {
  432. type: String,
  433. default: undefined
  434. },
  435. slideNextClass: {
  436. type: String,
  437. default: undefined
  438. },
  439. slidePrevClass: {
  440. type: String,
  441. default: undefined
  442. },
  443. wrapperClass: {
  444. type: String,
  445. default: undefined
  446. },
  447. lazyPreloaderClass: {
  448. type: String,
  449. default: undefined
  450. },
  451. lazyPreloadPrevNext: {
  452. type: Number,
  453. default: undefined
  454. },
  455. runCallbacksOnInit: {
  456. type: Boolean,
  457. default: undefined
  458. },
  459. observer: {
  460. type: Boolean,
  461. default: undefined
  462. },
  463. observeParents: {
  464. type: Boolean,
  465. default: undefined
  466. },
  467. observeSlideChildren: {
  468. type: Boolean,
  469. default: undefined
  470. },
  471. a11y: {
  472. type: [Boolean, Object],
  473. default: undefined
  474. },
  475. autoplay: {
  476. type: [Boolean, Object],
  477. default: undefined
  478. },
  479. controller: {
  480. type: Object,
  481. default: undefined
  482. },
  483. coverflowEffect: {
  484. type: Object,
  485. default: undefined
  486. },
  487. cubeEffect: {
  488. type: Object,
  489. default: undefined
  490. },
  491. fadeEffect: {
  492. type: Object,
  493. default: undefined
  494. },
  495. flipEffect: {
  496. type: Object,
  497. default: undefined
  498. },
  499. creativeEffect: {
  500. type: Object,
  501. default: undefined
  502. },
  503. cardsEffect: {
  504. type: Object,
  505. default: undefined
  506. },
  507. hashNavigation: {
  508. type: [Boolean, Object],
  509. default: undefined
  510. },
  511. history: {
  512. type: [Boolean, Object],
  513. default: undefined
  514. },
  515. keyboard: {
  516. type: [Boolean, Object],
  517. default: undefined
  518. },
  519. mousewheel: {
  520. type: [Boolean, Object],
  521. default: undefined
  522. },
  523. navigation: {
  524. type: [Boolean, Object],
  525. default: undefined
  526. },
  527. pagination: {
  528. type: [Boolean, Object],
  529. default: undefined
  530. },
  531. parallax: {
  532. type: [Boolean, Object],
  533. default: undefined
  534. },
  535. scrollbar: {
  536. type: [Boolean, Object],
  537. default: undefined
  538. },
  539. thumbs: {
  540. type: Object,
  541. default: undefined
  542. },
  543. virtual: {
  544. type: [Boolean, Object],
  545. default: undefined
  546. },
  547. zoom: {
  548. type: [Boolean, Object],
  549. default: undefined
  550. },
  551. grid: {
  552. type: [Object],
  553. default: undefined
  554. },
  555. freeMode: {
  556. type: [Boolean, Object],
  557. default: undefined
  558. },
  559. enabled: {
  560. type: Boolean,
  561. default: undefined
  562. }
  563. },
  564. emits: ['_beforeBreakpoint', '_containerClasses', '_slideClass', '_slideClasses', '_swiper', '_freeModeNoMomentumRelease', '_virtualUpdated', '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', 'slidesUpdated', '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'],
  565. setup(props, _ref) {
  566. let {
  567. slots: originalSlots,
  568. emit
  569. } = _ref;
  570. const {
  571. tag: Tag,
  572. wrapperTag: WrapperTag
  573. } = props;
  574. const containerClasses = ref('swiper');
  575. const virtualData = ref(null);
  576. const breakpointChanged = ref(false);
  577. const initializedRef = ref(false);
  578. const swiperElRef = ref(null);
  579. const swiperRef = ref(null);
  580. const oldPassedParamsRef = ref(null);
  581. const slidesRef = {
  582. value: []
  583. };
  584. const oldSlidesRef = {
  585. value: []
  586. };
  587. const nextElRef = ref(null);
  588. const prevElRef = ref(null);
  589. const paginationElRef = ref(null);
  590. const scrollbarElRef = ref(null);
  591. const {
  592. params: swiperParams,
  593. passedParams
  594. } = getParams(props, false);
  595. getChildren(originalSlots, slidesRef, oldSlidesRef);
  596. oldPassedParamsRef.value = passedParams;
  597. oldSlidesRef.value = slidesRef.value;
  598. const onBeforeBreakpoint = () => {
  599. getChildren(originalSlots, slidesRef, oldSlidesRef);
  600. breakpointChanged.value = true;
  601. };
  602. swiperParams.onAny = function (event) {
  603. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  604. args[_key - 1] = arguments[_key];
  605. }
  606. emit(event, ...args);
  607. };
  608. Object.assign(swiperParams.on, {
  609. _beforeBreakpoint: onBeforeBreakpoint,
  610. _containerClasses(swiper, classes) {
  611. containerClasses.value = classes;
  612. }
  613. });
  614. // init Swiper
  615. const passParams = {
  616. ...swiperParams
  617. };
  618. delete passParams.wrapperClass;
  619. swiperRef.value = new Swiper$1(passParams);
  620. if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
  621. swiperRef.value.virtual.slides = slidesRef.value;
  622. const extendWith = {
  623. cache: false,
  624. slides: slidesRef.value,
  625. renderExternal: data => {
  626. virtualData.value = data;
  627. },
  628. renderExternalUpdate: false
  629. };
  630. extend(swiperRef.value.params.virtual, extendWith);
  631. extend(swiperRef.value.originalParams.virtual, extendWith);
  632. }
  633. onUpdated(() => {
  634. // set initialized flag
  635. if (!initializedRef.value && swiperRef.value) {
  636. swiperRef.value.emitSlidesClasses();
  637. initializedRef.value = true;
  638. }
  639. // watch for params change
  640. const {
  641. passedParams: newPassedParams
  642. } = getParams(props, false);
  643. const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value, c => c.props && c.props.key);
  644. oldPassedParamsRef.value = newPassedParams;
  645. if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
  646. updateSwiper({
  647. swiper: swiperRef.value,
  648. slides: slidesRef.value,
  649. passedParams: newPassedParams,
  650. changedParams,
  651. nextEl: nextElRef.value,
  652. prevEl: prevElRef.value,
  653. scrollbarEl: scrollbarElRef.value,
  654. paginationEl: paginationElRef.value
  655. });
  656. }
  657. breakpointChanged.value = false;
  658. });
  659. provide('swiper', swiperRef);
  660. // update on virtual update
  661. watch(virtualData, () => {
  662. nextTick(() => {
  663. updateOnVirtualData(swiperRef.value);
  664. });
  665. });
  666. // mount swiper
  667. onMounted(() => {
  668. if (!swiperElRef.value) return;
  669. mountSwiper({
  670. el: swiperElRef.value,
  671. nextEl: nextElRef.value,
  672. prevEl: prevElRef.value,
  673. paginationEl: paginationElRef.value,
  674. scrollbarEl: scrollbarElRef.value,
  675. swiper: swiperRef.value
  676. }, swiperParams);
  677. emit('swiper', swiperRef.value);
  678. });
  679. onBeforeUnmount(() => {
  680. if (swiperRef.value && !swiperRef.value.destroyed) {
  681. swiperRef.value.destroy(true, false);
  682. }
  683. });
  684. // bypass swiper instance to slides
  685. function renderSlides(slides) {
  686. if (swiperParams.virtual) {
  687. return renderVirtual(swiperRef, slides, virtualData.value);
  688. }
  689. slides.forEach((slide, index) => {
  690. if (!slide.props) slide.props = {};
  691. slide.props.swiperRef = swiperRef;
  692. slide.props.swiperSlideIndex = index;
  693. });
  694. return slides;
  695. }
  696. return () => {
  697. const {
  698. slides,
  699. slots
  700. } = getChildren(originalSlots, slidesRef, oldSlidesRef);
  701. return h(Tag, {
  702. ref: swiperElRef,
  703. class: uniqueClasses(containerClasses.value)
  704. }, [slots['container-start'], h(WrapperTag, {
  705. class: wrapperClass(swiperParams.wrapperClass)
  706. }, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), needsNavigation(props) && [h('div', {
  707. ref: prevElRef,
  708. class: 'swiper-button-prev'
  709. }), h('div', {
  710. ref: nextElRef,
  711. class: 'swiper-button-next'
  712. })], needsScrollbar(props) && h('div', {
  713. ref: scrollbarElRef,
  714. class: 'swiper-scrollbar'
  715. }), needsPagination(props) && h('div', {
  716. ref: paginationElRef,
  717. class: 'swiper-pagination'
  718. }), slots['container-end']]);
  719. };
  720. }
  721. };
  722. const SwiperSlide = {
  723. name: 'SwiperSlide',
  724. props: {
  725. tag: {
  726. type: String,
  727. default: 'div'
  728. },
  729. swiperRef: {
  730. type: Object,
  731. required: false
  732. },
  733. swiperSlideIndex: {
  734. type: Number,
  735. default: undefined,
  736. required: false
  737. },
  738. zoom: {
  739. type: Boolean,
  740. default: undefined,
  741. required: false
  742. },
  743. lazy: {
  744. type: Boolean,
  745. default: false,
  746. required: false
  747. },
  748. virtualIndex: {
  749. type: [String, Number],
  750. default: undefined
  751. }
  752. },
  753. setup(props, _ref) {
  754. let {
  755. slots
  756. } = _ref;
  757. let eventAttached = false;
  758. const {
  759. swiperRef
  760. } = props;
  761. const slideElRef = ref(null);
  762. const slideClasses = ref('swiper-slide');
  763. const lazyLoaded = ref(false);
  764. function updateClasses(swiper, el, classNames) {
  765. if (el === slideElRef.value) {
  766. slideClasses.value = classNames;
  767. }
  768. }
  769. onMounted(() => {
  770. if (!swiperRef || !swiperRef.value) return;
  771. swiperRef.value.on('_slideClass', updateClasses);
  772. eventAttached = true;
  773. });
  774. onBeforeUpdate(() => {
  775. if (eventAttached || !swiperRef || !swiperRef.value) return;
  776. swiperRef.value.on('_slideClass', updateClasses);
  777. eventAttached = true;
  778. });
  779. onUpdated(() => {
  780. if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
  781. if (typeof props.swiperSlideIndex !== 'undefined') {
  782. slideElRef.value.swiperSlideIndex = props.swiperSlideIndex;
  783. }
  784. if (swiperRef.value.destroyed) {
  785. if (slideClasses.value !== 'swiper-slide') {
  786. slideClasses.value = 'swiper-slide';
  787. }
  788. }
  789. });
  790. onBeforeUnmount(() => {
  791. if (!swiperRef || !swiperRef.value) return;
  792. swiperRef.value.off('_slideClass', updateClasses);
  793. });
  794. const slideData = computed(() => ({
  795. isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0,
  796. isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
  797. isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0,
  798. isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0
  799. }));
  800. provide('swiperSlide', slideData);
  801. const onLoad = () => {
  802. lazyLoaded.value = true;
  803. };
  804. return () => {
  805. return h(props.tag, {
  806. class: uniqueClasses(`${slideClasses.value}`),
  807. ref: slideElRef,
  808. 'data-swiper-slide-index': typeof props.virtualIndex === 'undefined' && swiperRef && swiperRef.value && swiperRef.value.params.loop ? props.swiperSlideIndex : props.virtualIndex,
  809. onLoadCapture: onLoad
  810. }, props.zoom ? h('div', {
  811. class: 'swiper-zoom-container',
  812. 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
  813. }, [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
  814. class: 'swiper-lazy-preloader'
  815. })]) : [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
  816. class: 'swiper-lazy-preloader'
  817. })]);
  818. };
  819. }
  820. };
  821. const useSwiperSlide = () => {
  822. return inject('swiperSlide');
  823. };
  824. const useSwiper = () => {
  825. return inject('swiper');
  826. };
  827. export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };