swiper-vue.mjs 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830
  1. /**
  2. * Swiper Vue 11.1.15
  3. * Most modern mobile touch slider and framework with hardware accelerated transitions
  4. * https://swiperjs.com
  5. *
  6. * Copyright 2014-2024 Vladimir Kharlampidi
  7. *
  8. * Released under the MIT License
  9. *
  10. * Released on: November 18, 2024
  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. rewind: {
  372. type: Boolean,
  373. default: undefined
  374. },
  375. allowSlidePrev: {
  376. type: Boolean,
  377. default: undefined
  378. },
  379. allowSlideNext: {
  380. type: Boolean,
  381. default: undefined
  382. },
  383. swipeHandler: {
  384. type: Boolean,
  385. default: undefined
  386. },
  387. noSwiping: {
  388. type: Boolean,
  389. default: undefined
  390. },
  391. noSwipingClass: {
  392. type: String,
  393. default: undefined
  394. },
  395. noSwipingSelector: {
  396. type: String,
  397. default: undefined
  398. },
  399. passiveListeners: {
  400. type: Boolean,
  401. default: undefined
  402. },
  403. containerModifierClass: {
  404. type: String,
  405. default: undefined
  406. },
  407. slideClass: {
  408. type: String,
  409. default: undefined
  410. },
  411. slideActiveClass: {
  412. type: String,
  413. default: undefined
  414. },
  415. slideVisibleClass: {
  416. type: String,
  417. default: undefined
  418. },
  419. slideFullyVisibleClass: {
  420. type: String,
  421. default: undefined
  422. },
  423. slideBlankClass: {
  424. type: String,
  425. default: undefined
  426. },
  427. slideNextClass: {
  428. type: String,
  429. default: undefined
  430. },
  431. slidePrevClass: {
  432. type: String,
  433. default: undefined
  434. },
  435. wrapperClass: {
  436. type: String,
  437. default: undefined
  438. },
  439. lazyPreloaderClass: {
  440. type: String,
  441. default: undefined
  442. },
  443. lazyPreloadPrevNext: {
  444. type: Number,
  445. default: undefined
  446. },
  447. runCallbacksOnInit: {
  448. type: Boolean,
  449. default: undefined
  450. },
  451. observer: {
  452. type: Boolean,
  453. default: undefined
  454. },
  455. observeParents: {
  456. type: Boolean,
  457. default: undefined
  458. },
  459. observeSlideChildren: {
  460. type: Boolean,
  461. default: undefined
  462. },
  463. a11y: {
  464. type: [Boolean, Object],
  465. default: undefined
  466. },
  467. autoplay: {
  468. type: [Boolean, Object],
  469. default: undefined
  470. },
  471. controller: {
  472. type: Object,
  473. default: undefined
  474. },
  475. coverflowEffect: {
  476. type: Object,
  477. default: undefined
  478. },
  479. cubeEffect: {
  480. type: Object,
  481. default: undefined
  482. },
  483. fadeEffect: {
  484. type: Object,
  485. default: undefined
  486. },
  487. flipEffect: {
  488. type: Object,
  489. default: undefined
  490. },
  491. creativeEffect: {
  492. type: Object,
  493. default: undefined
  494. },
  495. cardsEffect: {
  496. type: Object,
  497. default: undefined
  498. },
  499. hashNavigation: {
  500. type: [Boolean, Object],
  501. default: undefined
  502. },
  503. history: {
  504. type: [Boolean, Object],
  505. default: undefined
  506. },
  507. keyboard: {
  508. type: [Boolean, Object],
  509. default: undefined
  510. },
  511. mousewheel: {
  512. type: [Boolean, Object],
  513. default: undefined
  514. },
  515. navigation: {
  516. type: [Boolean, Object],
  517. default: undefined
  518. },
  519. pagination: {
  520. type: [Boolean, Object],
  521. default: undefined
  522. },
  523. parallax: {
  524. type: [Boolean, Object],
  525. default: undefined
  526. },
  527. scrollbar: {
  528. type: [Boolean, Object],
  529. default: undefined
  530. },
  531. thumbs: {
  532. type: Object,
  533. default: undefined
  534. },
  535. virtual: {
  536. type: [Boolean, Object],
  537. default: undefined
  538. },
  539. zoom: {
  540. type: [Boolean, Object],
  541. default: undefined
  542. },
  543. grid: {
  544. type: [Object],
  545. default: undefined
  546. },
  547. freeMode: {
  548. type: [Boolean, Object],
  549. default: undefined
  550. },
  551. enabled: {
  552. type: Boolean,
  553. default: undefined
  554. }
  555. },
  556. 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', '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'],
  557. setup(props, _ref) {
  558. let {
  559. slots: originalSlots,
  560. emit
  561. } = _ref;
  562. const {
  563. tag: Tag,
  564. wrapperTag: WrapperTag
  565. } = props;
  566. const containerClasses = ref('swiper');
  567. const virtualData = ref(null);
  568. const breakpointChanged = ref(false);
  569. const initializedRef = ref(false);
  570. const swiperElRef = ref(null);
  571. const swiperRef = ref(null);
  572. const oldPassedParamsRef = ref(null);
  573. const slidesRef = {
  574. value: []
  575. };
  576. const oldSlidesRef = {
  577. value: []
  578. };
  579. const nextElRef = ref(null);
  580. const prevElRef = ref(null);
  581. const paginationElRef = ref(null);
  582. const scrollbarElRef = ref(null);
  583. const {
  584. params: swiperParams,
  585. passedParams
  586. } = getParams(props, false);
  587. getChildren(originalSlots, slidesRef, oldSlidesRef);
  588. oldPassedParamsRef.value = passedParams;
  589. oldSlidesRef.value = slidesRef.value;
  590. const onBeforeBreakpoint = () => {
  591. getChildren(originalSlots, slidesRef, oldSlidesRef);
  592. breakpointChanged.value = true;
  593. };
  594. swiperParams.onAny = function (event) {
  595. for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  596. args[_key - 1] = arguments[_key];
  597. }
  598. emit(event, ...args);
  599. };
  600. Object.assign(swiperParams.on, {
  601. _beforeBreakpoint: onBeforeBreakpoint,
  602. _containerClasses(swiper, classes) {
  603. containerClasses.value = classes;
  604. }
  605. });
  606. // init Swiper
  607. const passParams = {
  608. ...swiperParams
  609. };
  610. delete passParams.wrapperClass;
  611. swiperRef.value = new Swiper$1(passParams);
  612. if (swiperRef.value.virtual && swiperRef.value.params.virtual.enabled) {
  613. swiperRef.value.virtual.slides = slidesRef.value;
  614. const extendWith = {
  615. cache: false,
  616. slides: slidesRef.value,
  617. renderExternal: data => {
  618. virtualData.value = data;
  619. },
  620. renderExternalUpdate: false
  621. };
  622. extend(swiperRef.value.params.virtual, extendWith);
  623. extend(swiperRef.value.originalParams.virtual, extendWith);
  624. }
  625. onUpdated(() => {
  626. // set initialized flag
  627. if (!initializedRef.value && swiperRef.value) {
  628. swiperRef.value.emitSlidesClasses();
  629. initializedRef.value = true;
  630. }
  631. // watch for params change
  632. const {
  633. passedParams: newPassedParams
  634. } = getParams(props, false);
  635. const changedParams = getChangedParams(newPassedParams, oldPassedParamsRef.value, slidesRef.value, oldSlidesRef.value, c => c.props && c.props.key);
  636. oldPassedParamsRef.value = newPassedParams;
  637. if ((changedParams.length || breakpointChanged.value) && swiperRef.value && !swiperRef.value.destroyed) {
  638. updateSwiper({
  639. swiper: swiperRef.value,
  640. slides: slidesRef.value,
  641. passedParams: newPassedParams,
  642. changedParams,
  643. nextEl: nextElRef.value,
  644. prevEl: prevElRef.value,
  645. scrollbarEl: scrollbarElRef.value,
  646. paginationEl: paginationElRef.value
  647. });
  648. }
  649. breakpointChanged.value = false;
  650. });
  651. provide('swiper', swiperRef);
  652. // update on virtual update
  653. watch(virtualData, () => {
  654. nextTick(() => {
  655. updateOnVirtualData(swiperRef.value);
  656. });
  657. });
  658. // mount swiper
  659. onMounted(() => {
  660. if (!swiperElRef.value) return;
  661. mountSwiper({
  662. el: swiperElRef.value,
  663. nextEl: nextElRef.value,
  664. prevEl: prevElRef.value,
  665. paginationEl: paginationElRef.value,
  666. scrollbarEl: scrollbarElRef.value,
  667. swiper: swiperRef.value
  668. }, swiperParams);
  669. emit('swiper', swiperRef.value);
  670. });
  671. onBeforeUnmount(() => {
  672. if (swiperRef.value && !swiperRef.value.destroyed) {
  673. swiperRef.value.destroy(true, false);
  674. }
  675. });
  676. // bypass swiper instance to slides
  677. function renderSlides(slides) {
  678. if (swiperParams.virtual) {
  679. return renderVirtual(swiperRef, slides, virtualData.value);
  680. }
  681. slides.forEach((slide, index) => {
  682. if (!slide.props) slide.props = {};
  683. slide.props.swiperRef = swiperRef;
  684. slide.props.swiperSlideIndex = index;
  685. });
  686. return slides;
  687. }
  688. return () => {
  689. const {
  690. slides,
  691. slots
  692. } = getChildren(originalSlots, slidesRef, oldSlidesRef);
  693. return h(Tag, {
  694. ref: swiperElRef,
  695. class: uniqueClasses(containerClasses.value)
  696. }, [slots['container-start'], h(WrapperTag, {
  697. class: wrapperClass(swiperParams.wrapperClass)
  698. }, [slots['wrapper-start'], renderSlides(slides), slots['wrapper-end']]), needsNavigation(props) && [h('div', {
  699. ref: prevElRef,
  700. class: 'swiper-button-prev'
  701. }), h('div', {
  702. ref: nextElRef,
  703. class: 'swiper-button-next'
  704. })], needsScrollbar(props) && h('div', {
  705. ref: scrollbarElRef,
  706. class: 'swiper-scrollbar'
  707. }), needsPagination(props) && h('div', {
  708. ref: paginationElRef,
  709. class: 'swiper-pagination'
  710. }), slots['container-end']]);
  711. };
  712. }
  713. };
  714. const SwiperSlide = {
  715. name: 'SwiperSlide',
  716. props: {
  717. tag: {
  718. type: String,
  719. default: 'div'
  720. },
  721. swiperRef: {
  722. type: Object,
  723. required: false
  724. },
  725. swiperSlideIndex: {
  726. type: Number,
  727. default: undefined,
  728. required: false
  729. },
  730. zoom: {
  731. type: Boolean,
  732. default: undefined,
  733. required: false
  734. },
  735. lazy: {
  736. type: Boolean,
  737. default: false,
  738. required: false
  739. },
  740. virtualIndex: {
  741. type: [String, Number],
  742. default: undefined
  743. }
  744. },
  745. setup(props, _ref) {
  746. let {
  747. slots
  748. } = _ref;
  749. let eventAttached = false;
  750. const {
  751. swiperRef
  752. } = props;
  753. const slideElRef = ref(null);
  754. const slideClasses = ref('swiper-slide');
  755. const lazyLoaded = ref(false);
  756. function updateClasses(swiper, el, classNames) {
  757. if (el === slideElRef.value) {
  758. slideClasses.value = classNames;
  759. }
  760. }
  761. onMounted(() => {
  762. if (!swiperRef || !swiperRef.value) return;
  763. swiperRef.value.on('_slideClass', updateClasses);
  764. eventAttached = true;
  765. });
  766. onBeforeUpdate(() => {
  767. if (eventAttached || !swiperRef || !swiperRef.value) return;
  768. swiperRef.value.on('_slideClass', updateClasses);
  769. eventAttached = true;
  770. });
  771. onUpdated(() => {
  772. if (!slideElRef.value || !swiperRef || !swiperRef.value) return;
  773. if (typeof props.swiperSlideIndex !== 'undefined') {
  774. slideElRef.value.swiperSlideIndex = props.swiperSlideIndex;
  775. }
  776. if (swiperRef.value.destroyed) {
  777. if (slideClasses.value !== 'swiper-slide') {
  778. slideClasses.value = 'swiper-slide';
  779. }
  780. }
  781. });
  782. onBeforeUnmount(() => {
  783. if (!swiperRef || !swiperRef.value) return;
  784. swiperRef.value.off('_slideClass', updateClasses);
  785. });
  786. const slideData = computed(() => ({
  787. isActive: slideClasses.value.indexOf('swiper-slide-active') >= 0,
  788. isVisible: slideClasses.value.indexOf('swiper-slide-visible') >= 0,
  789. isPrev: slideClasses.value.indexOf('swiper-slide-prev') >= 0,
  790. isNext: slideClasses.value.indexOf('swiper-slide-next') >= 0
  791. }));
  792. provide('swiperSlide', slideData);
  793. const onLoad = () => {
  794. lazyLoaded.value = true;
  795. };
  796. return () => {
  797. return h(props.tag, {
  798. class: uniqueClasses(`${slideClasses.value}`),
  799. ref: slideElRef,
  800. 'data-swiper-slide-index': typeof props.virtualIndex === 'undefined' && swiperRef && swiperRef.value && swiperRef.value.params.loop ? props.swiperSlideIndex : props.virtualIndex,
  801. onLoadCapture: onLoad
  802. }, props.zoom ? h('div', {
  803. class: 'swiper-zoom-container',
  804. 'data-swiper-zoom': typeof props.zoom === 'number' ? props.zoom : undefined
  805. }, [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
  806. class: 'swiper-lazy-preloader'
  807. })]) : [slots.default && slots.default(slideData.value), props.lazy && !lazyLoaded.value && h('div', {
  808. class: 'swiper-lazy-preloader'
  809. })]);
  810. };
  811. }
  812. };
  813. const useSwiperSlide = () => {
  814. return inject('swiperSlide');
  815. };
  816. const useSwiper = () => {
  817. return inject('swiper');
  818. };
  819. export { Swiper, SwiperSlide, useSwiper, useSwiperSlide };