slides.js 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
  12. import { Config } from '../../config/config';
  13. import { enableKeyboardControl } from './swiper/swiper-keyboard';
  14. import { Ion } from '../ion';
  15. import { isTrueProperty } from '../../util/util';
  16. import { initEvents } from './swiper/swiper-events';
  17. import { initZoom } from './swiper/swiper-zoom';
  18. import { Platform } from '../../platform/platform';
  19. import { destroySwiper, initSwiper, slideNext, slidePrev, slideTo, startAutoplay, stopAutoplay, update, } from './swiper/swiper';
  20. import { SWIPER_EFFECTS } from './swiper/swiper-effects';
  21. import { ViewController } from '../../navigation/view-controller';
  22. /**
  23. * @name Slides
  24. * @description
  25. * The Slides component is a multi-section container. Each section can be swiped
  26. * or dragged between. It contains any number of [Slide](../Slide) components.
  27. *
  28. *
  29. * ### Creating
  30. * You should use a template to create slides and listen to slide events. The template
  31. * should contain the slide container, an `<ion-slides>` element, and any number of
  32. * [Slide](../Slide) components, written as `<ion-slide>`. Basic configuration
  33. * values can be set as input properties, which are listed below. Slides events
  34. * can also be listened to such as the slide changing by placing the event on the
  35. * `<ion-slides>` element. See [Usage](#usage) below for more information.
  36. *
  37. *
  38. * ### Navigating
  39. * After creating and configuring the slides, you can navigate between them
  40. * by swiping or calling methods on the `Slides` instance. You can call `slideTo()` to
  41. * navigate to a specific slide, or `slideNext()` to change to the slide that follows
  42. * the active slide. All of the [methods](#instance-members) provided by the `Slides`
  43. * instance are listed below. See [Usage](#usage) below for more information on
  44. * navigating between slides.
  45. *
  46. *
  47. * @usage
  48. *
  49. * You can add slides to a `@Component` using the following template:
  50. *
  51. * ```html
  52. * <ion-slides>
  53. * <ion-slide>
  54. * <h1>Slide 1</h1>
  55. * </ion-slide>
  56. * <ion-slide>
  57. * <h1>Slide 2</h1>
  58. * </ion-slide>
  59. * <ion-slide>
  60. * <h1>Slide 3</h1>
  61. * </ion-slide>
  62. * </ion-slides>
  63. * ```
  64. *
  65. * Next, we can use `ViewChild` to assign the Slides instance to
  66. * your `slides` property. Now we can call any of the `Slides`
  67. * [methods](#instance-members), for example we can use the Slide's
  68. * `slideTo()` method in order to navigate to a specific slide on
  69. * a button click. Below we call the `goToSlide()` method and it
  70. * navigates to the 3rd slide:
  71. *
  72. * ```ts
  73. * import { ViewChild } from '@angular/core';
  74. * import { Slides } from 'ionic-angular';
  75. *
  76. * class MyPage {
  77. * @ViewChild(Slides) slides: Slides;
  78. *
  79. * goToSlide() {
  80. * this.slides.slideTo(2, 500);
  81. * }
  82. * }
  83. * ```
  84. *
  85. * We can also add events to listen to on the `<ion-slides>` element.
  86. * Let's add the `ionSlideDidChange` event and call a method when the slide changes:
  87. *
  88. * ```html
  89. * <ion-slides (ionSlideDidChange)="slideChanged()">
  90. * ```
  91. *
  92. * In our class, we add the `slideChanged()` method which gets the active
  93. * index and prints it:
  94. *
  95. * ```ts
  96. * class MyPage {
  97. * ...
  98. *
  99. * slideChanged() {
  100. * let currentIndex = this.slides.getActiveIndex();
  101. * console.log('Current index is', currentIndex);
  102. * }
  103. * }
  104. * ```
  105. *
  106. * ### Zooming
  107. * If your slides contain images, you can enable zooming on them by setting `zoom="true" and
  108. * wrapping each image in a `div` with the class `swiper-zoom-container`. Zoom supports
  109. * `img`, `svg`, `canvas`, and `ion-img`.
  110. *
  111. * ```html
  112. * <ion-slides zoom="true">
  113. * <ion-slide>
  114. * <div class="swiper-zoom-container">
  115. * <img src="assets/img/dog.jpg">
  116. * </div>
  117. * <ion-label>Woof</ion-label>
  118. * </ion-slide>
  119. * <ion-slide>
  120. * <div class="swiper-zoom-container">
  121. * <img src="assets/img/cat.jpg">
  122. * </div>
  123. * <ion-label>Meow</ion-label>
  124. * </ion-slide>
  125. * <ion-slide>
  126. * <div class="swiper-zoom-container">
  127. * <img src="assets/img/fish.jpg">
  128. * </div>
  129. * <ion-label>Just keep swimming</ion-label>
  130. * </ion-slide>
  131. * </ion-slides>
  132. * ```
  133. *
  134. * @advanced
  135. *
  136. * There are several options available to create customized slides. Ionic exposes
  137. * the most commonly used options as [inputs](http://learnangular2.com/inputs/).
  138. * In order to use an option that isn't exposed as an input the following code
  139. * should be used, where `freeMode` is the option to change:
  140. *
  141. * ```ts
  142. * import { ViewChild } from '@angular/core';
  143. * import { Slides } from 'ionic-angular';
  144. * class MyPage {
  145. * @ViewChild(Slides) slides: Slides;
  146. *
  147. * ngAfterViewInit() {
  148. * this.slides.freeMode = true;
  149. * }
  150. * }
  151. *
  152. * ```
  153. *
  154. * To see all of the available options, take a look at the
  155. * [source for slides](https://github.com/ionic-team/ionic/blob/master/src/components/slides/slides.ts).
  156. *
  157. * @demo /docs/demos/src/slides/
  158. * @see {@link /docs/components#slides Slides Component Docs}
  159. *
  160. * Adopted from Swiper.js:
  161. * The most modern mobile touch slider and framework with
  162. * hardware accelerated transitions.
  163. *
  164. * http://www.idangero.us/swiper/
  165. *
  166. * Copyright 2016, Vladimir Kharlampidi
  167. * The iDangero.us
  168. * http://www.idangero.us/
  169. *
  170. * Licensed under MIT
  171. */
  172. var Slides = (function (_super) {
  173. __extends(Slides, _super);
  174. function Slides(config, _plt, zone, viewCtrl, elementRef, renderer) {
  175. var _this = _super.call(this, config, elementRef, renderer, 'slides') || this;
  176. _this._plt = _plt;
  177. _this._control = null;
  178. _this._effectName = 'slide';
  179. _this._direction = 'horizontal';
  180. _this._initialSlide = 0;
  181. _this._isLoop = false;
  182. _this._pager = false;
  183. _this._paginationType = 'bullets';
  184. /** @hidden */
  185. _this.paginationBulletRender = null;
  186. _this._isParallax = false;
  187. _this._speedMs = 300;
  188. _this._isZoom = false;
  189. /**
  190. * @hidden
  191. * Enabled this option and swiper will be operated as usual except it will
  192. * not move, real translate values on wrapper will not be set. Useful when
  193. * you may need to create custom slide transition.
  194. */
  195. _this.virtualTranslate = false;
  196. /**
  197. * @hidden
  198. * Set to true to round values of slides width and height to prevent blurry
  199. * texts on usual resolution screens (if you have such)
  200. */
  201. _this.roundLengths = false;
  202. _this._spaceBetween = 0;
  203. _this._slidesPerView = 1;
  204. _this._centeredSlides = false;
  205. /**
  206. * @hidden
  207. */
  208. _this.slidesPerColumn = 1;
  209. /**
  210. * @hidden
  211. */
  212. _this.slidesPerColumnFill = 'column';
  213. /**
  214. * @hidden
  215. */
  216. _this.slidesPerGroup = 1;
  217. /**
  218. * @hidden
  219. */
  220. _this.slidesOffsetBefore = 0;
  221. /**
  222. * @hidden
  223. */
  224. _this.slidesOffsetAfter = 0;
  225. // autoplay
  226. /**
  227. * @hidden
  228. */
  229. _this.autoplayDisableOnInteraction = true;
  230. /**
  231. * @hidden
  232. */
  233. _this.autoplayStopOnLast = false;
  234. // Free mode
  235. /**
  236. * @hidden
  237. */
  238. _this.freeMode = false;
  239. /**
  240. * @hidden
  241. */
  242. _this.freeModeMomentum = true;
  243. /**
  244. * @hidden
  245. */
  246. _this.freeModeMomentumRatio = 1;
  247. /**
  248. * @hidden
  249. */
  250. _this.freeModeMomentumBounce = true;
  251. /**
  252. * @hidden
  253. */
  254. _this.freeModeMomentumBounceRatio = 1;
  255. /**
  256. * @hidden
  257. */
  258. _this.freeModeMomentumVelocityRatio = 1;
  259. /**
  260. * @hidden
  261. */
  262. _this.freeModeSticky = false;
  263. /**
  264. * @hidden
  265. */
  266. _this.freeModeMinimumVelocity = 0.02;
  267. // Autoheight
  268. /**
  269. * @hidden
  270. */
  271. _this.autoHeight = false;
  272. // Set wrapper width
  273. /**
  274. * @hidden
  275. */
  276. _this.setWrapperSize = false;
  277. // Zoom
  278. /**
  279. * @hidden
  280. */
  281. _this.zoomMax = 3;
  282. /**
  283. * @hidden
  284. */
  285. _this.zoomMin = 1;
  286. /**
  287. * @hidden
  288. */
  289. _this.zoomToggle = true;
  290. // Touches
  291. /**
  292. * @hidden
  293. */
  294. _this.touchRatio = 1;
  295. /**
  296. * @hidden
  297. */
  298. _this.touchAngle = 45;
  299. /**
  300. * @hidden
  301. */
  302. _this.simulateTouch = true;
  303. /**
  304. * @hidden
  305. */
  306. _this.shortSwipes = true;
  307. /**
  308. * @hidden
  309. */
  310. _this.longSwipes = true;
  311. /**
  312. * @hidden
  313. */
  314. _this.longSwipesRatio = 0.5;
  315. /**
  316. * @hidden
  317. */
  318. _this.longSwipesMs = 300;
  319. /**
  320. * @hidden
  321. */
  322. _this.followFinger = true;
  323. /**
  324. * @hidden
  325. */
  326. _this.onlyExternal = false;
  327. /**
  328. * @hidden
  329. */
  330. _this.threshold = 0;
  331. /**
  332. * @hidden
  333. */
  334. _this.touchMoveStopPropagation = true;
  335. /**
  336. * @hidden
  337. */
  338. _this.touchReleaseOnEdges = false;
  339. // To support iOS's swipe-to-go-back gesture (when being used in-app, with UIWebView).
  340. /**
  341. * @hidden
  342. */
  343. _this.iOSEdgeSwipeDetection = false;
  344. /**
  345. * @hidden
  346. */
  347. _this.iOSEdgeSwipeThreshold = 20;
  348. // Pagination
  349. /**
  350. * @hidden
  351. */
  352. _this.paginationClickable = false;
  353. /**
  354. * @hidden
  355. */
  356. _this.paginationHide = false;
  357. // Resistance
  358. /** @hidden */
  359. _this.resistance = true;
  360. /** @hidden */
  361. _this.resistanceRatio = 0.85;
  362. // Progress
  363. /** @hidden */
  364. _this.watchSlidesProgress = false;
  365. /** @hidden */
  366. _this.watchSlidesVisibility = false;
  367. // Clicks
  368. /**
  369. * @hidden
  370. */
  371. _this.preventClicks = true;
  372. /**
  373. * @hidden
  374. */
  375. _this.preventClicksPropagation = true;
  376. /**
  377. * @hidden
  378. */
  379. _this.slideToClickedSlide = false;
  380. // loop
  381. /**
  382. * @hidden
  383. */
  384. _this.loopAdditionalSlides = 0;
  385. /**
  386. * @hidden
  387. */
  388. _this.loopedSlides = null;
  389. // Swiping/no swiping
  390. /**
  391. * @hidden
  392. */
  393. _this.swipeHandler = null;
  394. /**
  395. * @hidden
  396. */
  397. _this.noSwiping = true;
  398. // Callbacks
  399. /** @hidden */
  400. _this.runCallbacksOnInit = true;
  401. // Controller
  402. _this.controlBy = 'slide';
  403. _this.controlInverse = false;
  404. // Keyboard
  405. /**
  406. * @hidden
  407. */
  408. _this.keyboardControl = true;
  409. // Effects
  410. /**
  411. * @hidden
  412. */
  413. _this.coverflow = {
  414. rotate: 50,
  415. stretch: 0,
  416. depth: 100,
  417. modifier: 1,
  418. slideShadows: true
  419. };
  420. /**
  421. * @hidden
  422. */
  423. _this.flip = {
  424. slideShadows: true,
  425. limitRotation: true
  426. };
  427. /**
  428. * @hidden
  429. */
  430. _this.cube = {
  431. slideShadows: true,
  432. shadow: true,
  433. shadowOffset: 20,
  434. shadowScale: 0.94
  435. };
  436. /**
  437. * @hidden
  438. */
  439. _this.fade = {
  440. crossFade: false
  441. };
  442. // Accessibility
  443. /**
  444. * @hidden
  445. */
  446. _this.prevSlideMessage = 'Previous slide';
  447. /**
  448. * @hidden
  449. */
  450. _this.nextSlideMessage = 'Next slide';
  451. /**
  452. * @hidden
  453. */
  454. _this.firstSlideMessage = 'This is the first slide';
  455. /**
  456. * @hidden
  457. */
  458. _this.lastSlideMessage = 'This is the last slide';
  459. /**
  460. * @output {Slides} Emitted when a slide change starts.
  461. */
  462. _this.ionSlideWillChange = new EventEmitter();
  463. /**
  464. * @output {Slides} Emitted when a slide change ends.
  465. */
  466. _this.ionSlideDidChange = new EventEmitter();
  467. /**
  468. * @output {Slides} Emitted when a slide moves.
  469. */
  470. _this.ionSlideDrag = new EventEmitter();
  471. /**
  472. * @output {Slides} Emitted when slides reaches its beginning (initial position).
  473. */
  474. _this.ionSlideReachStart = new EventEmitter();
  475. /**
  476. * @output {Slides} Emitted when slides reaches its last slide.
  477. */
  478. _this.ionSlideReachEnd = new EventEmitter();
  479. /**
  480. * @output {Slides} Emitted when a slide moves.
  481. */
  482. _this.ionSlideAutoplay = new EventEmitter();
  483. /**
  484. * @output {Slides} Emitted when a autoplay starts.
  485. */
  486. _this.ionSlideAutoplayStart = new EventEmitter();
  487. /**
  488. * @output {Slides} Emitted when a autoplay stops.
  489. */
  490. _this.ionSlideAutoplayStop = new EventEmitter();
  491. /**
  492. * @output {Slides} Emitted when a slide change starts with the "forward" direction.
  493. */
  494. _this.ionSlideNextStart = new EventEmitter();
  495. /**
  496. * @output {Slides} Emitted when a slide change starts with the "backward" direction.
  497. */
  498. _this.ionSlidePrevStart = new EventEmitter();
  499. /**
  500. * @output {Slides} Emitted when a slide change ends with the "forward" direction.
  501. */
  502. _this.ionSlideNextEnd = new EventEmitter();
  503. /**
  504. * @output {Slides} Emitted when a slide change ends with the "backward" direction.
  505. */
  506. _this.ionSlidePrevEnd = new EventEmitter();
  507. /**
  508. * @output {Slides} Emitted when the user taps/clicks on the slide's container.
  509. */
  510. _this.ionSlideTap = new EventEmitter();
  511. /**
  512. * @output {Slides} Emitted when the user double taps on the slide's container.
  513. */
  514. _this.ionSlideDoubleTap = new EventEmitter();
  515. /** @hidden */
  516. _this.ionSlideProgress = new EventEmitter();
  517. /** @hidden */
  518. _this.ionSlideTransitionStart = new EventEmitter();
  519. /** @hidden */
  520. _this.ionSlideTransitionEnd = new EventEmitter();
  521. /** @hidden */
  522. _this.ionSlideTouchStart = new EventEmitter();
  523. /** @hidden */
  524. _this.ionSlideTouchEnd = new EventEmitter();
  525. _this._unregs = [];
  526. /** @internal */
  527. _this._allowSwipeToNext = true;
  528. /** @internal */
  529. _this._allowSwipeToPrev = true;
  530. _this._zone = zone;
  531. _this.id = ++slidesId;
  532. _this.slideId = 'slides-' + _this.id;
  533. _this.setElementClass(_this.slideId, true);
  534. // only initialize the slides whent the content is ready
  535. if (viewCtrl) {
  536. var subscription = viewCtrl.readReady.subscribe(function () {
  537. subscription.unsubscribe();
  538. _this._initSlides();
  539. });
  540. }
  541. return _this;
  542. }
  543. Object.defineProperty(Slides.prototype, "autoplay", {
  544. /**
  545. * @input {number} Delay between transitions (in milliseconds). If this
  546. * parameter is not passed, autoplay is disabled. Default does
  547. * not have a value and does not autoplay.
  548. * Default: `null`.
  549. */
  550. get: function () {
  551. return this._autoplayMs;
  552. },
  553. set: function (val) {
  554. this._autoplayMs = parseInt(val, 10);
  555. },
  556. enumerable: true,
  557. configurable: true
  558. });
  559. Object.defineProperty(Slides.prototype, "control", {
  560. /**
  561. * @input {Slides} Pass another Slides instance or array of Slides instances
  562. * that should be controlled by this Slides instance.
  563. * Default: `null`.
  564. */
  565. get: function () {
  566. return this._control;
  567. },
  568. set: function (val) {
  569. if (val instanceof Slides || Array.isArray(val)) {
  570. this._control = val;
  571. }
  572. },
  573. enumerable: true,
  574. configurable: true
  575. });
  576. Object.defineProperty(Slides.prototype, "effect", {
  577. /**
  578. * @input {string} The animation effect of the slides.
  579. * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
  580. * Default: `slide`.
  581. */
  582. get: function () {
  583. return this._effectName;
  584. },
  585. set: function (effectName) {
  586. if (SWIPER_EFFECTS[effectName]) {
  587. this._effectName = effectName;
  588. }
  589. },
  590. enumerable: true,
  591. configurable: true
  592. });
  593. Object.defineProperty(Slides.prototype, "direction", {
  594. /**
  595. * @input {string} Swipe direction: 'horizontal' or 'vertical'.
  596. * Default: `horizontal`.
  597. */
  598. get: function () {
  599. return this._direction;
  600. },
  601. set: function (val) {
  602. if (val === 'horizontal' || val === 'vertical') {
  603. this._direction = val;
  604. }
  605. },
  606. enumerable: true,
  607. configurable: true
  608. });
  609. Object.defineProperty(Slides.prototype, "initialSlide", {
  610. /**
  611. * @input {number} Index number of initial slide. Default: `0`.
  612. */
  613. get: function () {
  614. return this._initialSlide;
  615. },
  616. set: function (val) {
  617. this._initialSlide = parseInt(val, 10);
  618. },
  619. enumerable: true,
  620. configurable: true
  621. });
  622. Object.defineProperty(Slides.prototype, "loop", {
  623. /**
  624. * @input {boolean} If true, continuously loop from the last slide to the
  625. * first slide.
  626. */
  627. get: function () {
  628. return this._isLoop;
  629. },
  630. set: function (val) {
  631. this._isLoop = isTrueProperty(val);
  632. },
  633. enumerable: true,
  634. configurable: true
  635. });
  636. Object.defineProperty(Slides.prototype, "pager", {
  637. /**
  638. * @input {boolean} If true, show the pager.
  639. */
  640. get: function () {
  641. return this._pager;
  642. },
  643. set: function (val) {
  644. this._pager = isTrueProperty(val);
  645. },
  646. enumerable: true,
  647. configurable: true
  648. });
  649. Object.defineProperty(Slides.prototype, "dir", {
  650. /**
  651. * @input {string} If dir attribute is equal to rtl, set interal _rtl to true;
  652. */
  653. set: function (val) {
  654. this._rtl = (val.toLowerCase() === 'rtl');
  655. },
  656. enumerable: true,
  657. configurable: true
  658. });
  659. Object.defineProperty(Slides.prototype, "paginationType", {
  660. /**
  661. * @input {string} Type of pagination. Possible values are:
  662. * `bullets`, `fraction`, `progress`. Default: `bullets`.
  663. * (Note that the pager will not show unless `pager` input
  664. * is set to true).
  665. */
  666. get: function () {
  667. return this._paginationType;
  668. },
  669. set: function (val) {
  670. if (val === 'bullets' || val === 'fraction' || val === 'progress') {
  671. this._paginationType = val;
  672. }
  673. },
  674. enumerable: true,
  675. configurable: true
  676. });
  677. Object.defineProperty(Slides.prototype, "parallax", {
  678. /**
  679. * @input {boolean} If true, allows you to use "parallaxed" elements inside of
  680. * slider.
  681. */
  682. get: function () {
  683. return this._isParallax;
  684. },
  685. set: function (val) {
  686. this._isParallax = isTrueProperty(val);
  687. },
  688. enumerable: true,
  689. configurable: true
  690. });
  691. Object.defineProperty(Slides.prototype, "speed", {
  692. /**
  693. * @input {number} Duration of transition between slides
  694. * (in milliseconds). Default: `300`.
  695. */
  696. get: function () {
  697. return this._speedMs;
  698. },
  699. set: function (val) {
  700. this._speedMs = parseInt(val, 10);
  701. },
  702. enumerable: true,
  703. configurable: true
  704. });
  705. Object.defineProperty(Slides.prototype, "zoom", {
  706. /**
  707. * @input {boolean} If true, enables zooming functionality.
  708. */
  709. get: function () {
  710. return this._isZoom;
  711. },
  712. set: function (val) {
  713. this._isZoom = isTrueProperty(val);
  714. },
  715. enumerable: true,
  716. configurable: true
  717. });
  718. Object.defineProperty(Slides.prototype, "spaceBetween", {
  719. // Slides grid
  720. /**
  721. * @input {number} Distance between slides in px. Default: `0`.
  722. */
  723. get: function () {
  724. return this._spaceBetween;
  725. },
  726. set: function (val) {
  727. this._spaceBetween = parseInt(val, 10);
  728. },
  729. enumerable: true,
  730. configurable: true
  731. });
  732. Object.defineProperty(Slides.prototype, "slidesPerView", {
  733. /**
  734. * @input {number} Slides per view. Slides visible at the same time. Default: `1`.
  735. */
  736. get: function () {
  737. return this._slidesPerView;
  738. },
  739. set: function (val) {
  740. this._slidesPerView = val === 'auto' ? 'auto' : parseFloat(val);
  741. },
  742. enumerable: true,
  743. configurable: true
  744. });
  745. Object.defineProperty(Slides.prototype, "centeredSlides", {
  746. /**
  747. * @input {boolean} Center a slide in the middle of the screen.
  748. */
  749. get: function () {
  750. return this._centeredSlides;
  751. },
  752. set: function (val) {
  753. this._centeredSlides = isTrueProperty(val);
  754. },
  755. enumerable: true,
  756. configurable: true
  757. });
  758. Slides.prototype._initSlides = function () {
  759. if (!this._init) {
  760. (void 0) /* console.debug */;
  761. var s = this;
  762. var plt = s._plt;
  763. s.container = this.getNativeElement().children[0];
  764. // init swiper core
  765. initSwiper(s, plt);
  766. // init core event listeners
  767. this._unregs.push(initEvents(s, plt));
  768. if (this.zoom) {
  769. // init zoom event listeners
  770. this._unregs.push(initZoom(s, plt));
  771. }
  772. if (this.keyboardControl) {
  773. // init keyboard event listeners
  774. s.enableKeyboardControl(true);
  775. }
  776. this._init = true;
  777. }
  778. };
  779. /**
  780. * @hidden
  781. */
  782. Slides.prototype.ngAfterContentInit = function () {
  783. var _this = this;
  784. this._plt.timeout(function () {
  785. _this._initSlides();
  786. }, 300);
  787. };
  788. /**
  789. * Update the underlying slider implementation. Call this if you've added or removed
  790. * child slides.
  791. */
  792. Slides.prototype.update = function (debounce) {
  793. var _this = this;
  794. if (debounce === void 0) { debounce = 300; }
  795. if (this._init) {
  796. this._plt.cancelTimeout(this._tmr);
  797. this._tmr = this._plt.timeout(function () {
  798. update(_this, _this._plt);
  799. // Don't allow pager to show with > 10 slides
  800. if (_this.length() > 10) {
  801. _this.paginationType = undefined;
  802. }
  803. }, debounce);
  804. }
  805. };
  806. Slides.prototype.resize = function () {
  807. if (this._init) {
  808. }
  809. };
  810. /**
  811. * Transition to the specified slide.
  812. *
  813. * @param {number} index The index number of the slide.
  814. * @param {number} [speed] Transition duration (in ms).
  815. * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
  816. */
  817. Slides.prototype.slideTo = function (index, speed, runCallbacks) {
  818. slideTo(this, this._plt, index, speed, runCallbacks);
  819. };
  820. /**
  821. * Transition to the next slide.
  822. *
  823. * @param {number} [speed] Transition duration (in ms).
  824. * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
  825. */
  826. Slides.prototype.slideNext = function (speed, runCallbacks) {
  827. slideNext(this, this._plt, runCallbacks, speed, true);
  828. };
  829. /**
  830. * Transition to the previous slide.
  831. *
  832. * @param {number} [speed] Transition duration (in ms).
  833. * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
  834. */
  835. Slides.prototype.slidePrev = function (speed, runCallbacks) {
  836. slidePrev(this, this._plt, runCallbacks, speed, true);
  837. };
  838. /**
  839. * Get the index of the active slide.
  840. *
  841. * @returns {number} The index number of the current slide.
  842. */
  843. Slides.prototype.getActiveIndex = function () {
  844. return this._activeIndex;
  845. };
  846. /**
  847. * Get the index of the previous slide.
  848. *
  849. * @returns {number} The index number of the previous slide.
  850. */
  851. Slides.prototype.getPreviousIndex = function () {
  852. return this._previousIndex;
  853. };
  854. /**
  855. * Get the total number of slides.
  856. *
  857. * @returns {number} The total number of slides.
  858. */
  859. Slides.prototype.length = function () {
  860. return this._slides.length;
  861. };
  862. /**
  863. * Get whether or not the current slide is the last slide.
  864. *
  865. * @returns {boolean} If the slide is the last slide or not.
  866. */
  867. Slides.prototype.isEnd = function () {
  868. return this._isEnd;
  869. };
  870. /**
  871. * Get whether or not the current slide is the first slide.
  872. *
  873. * @returns {boolean} If the slide is the first slide or not.
  874. */
  875. Slides.prototype.isBeginning = function () {
  876. return this._isBeginning;
  877. };
  878. /**
  879. * Start auto play.
  880. */
  881. Slides.prototype.startAutoplay = function () {
  882. startAutoplay(this, this._plt);
  883. };
  884. /**
  885. * Stop auto play.
  886. */
  887. Slides.prototype.stopAutoplay = function () {
  888. stopAutoplay(this);
  889. };
  890. /**
  891. * Lock or unlock the ability to slide to the next slides.
  892. * @param {boolean} shouldLockSwipeToNext If set to true the user will not be able to swipe to the next slide.
  893. * Set to false to unlock this behaviour.
  894. */
  895. Slides.prototype.lockSwipeToNext = function (shouldLockSwipeToNext) {
  896. this._allowSwipeToNext = !shouldLockSwipeToNext;
  897. };
  898. /**
  899. * Lock or unlock the ability to slide to the previous slides.
  900. * @param {boolean} shouldLockSwipeToPrev If set to true the user will not be able to swipe to the previous slide.
  901. * Set to false to unlock this behaviour.
  902. */
  903. Slides.prototype.lockSwipeToPrev = function (shouldLockSwipeToPrev) {
  904. this._allowSwipeToPrev = !shouldLockSwipeToPrev;
  905. };
  906. /**
  907. * Lock or unlock the ability to slide to change slides.
  908. * @param {boolean} shouldLockSwipes If set to true user can not swipe in either direction on slide.
  909. * False allows swiping in both directions.
  910. */
  911. Slides.prototype.lockSwipes = function (shouldLockSwipes) {
  912. this._allowSwipeToNext = this._allowSwipeToPrev = !shouldLockSwipes;
  913. };
  914. /**
  915. * Enable or disable keyboard control.
  916. * @param {boolean} shouldEnableKeyboard If set to true the slider can be controled by a keyboard.
  917. */
  918. Slides.prototype.enableKeyboardControl = function (shouldEnableKeyboard) {
  919. enableKeyboardControl(this, this._plt, shouldEnableKeyboard);
  920. };
  921. /**
  922. * @hidden
  923. */
  924. Slides.prototype.ngOnDestroy = function () {
  925. this._init = false;
  926. this._unregs.forEach(function (unReg) {
  927. unReg();
  928. });
  929. this._unregs.length = 0;
  930. destroySwiper(this);
  931. this.enableKeyboardControl(false);
  932. };
  933. Slides.decorators = [
  934. { type: Component, args: [{
  935. selector: 'ion-slides',
  936. template: '<div class="swiper-container" [attr.dir]="_rtl? \'rtl\' : null">' +
  937. '<div class="swiper-wrapper">' +
  938. '<ng-content></ng-content>' +
  939. '</div>' +
  940. '<div [class.hide]="!pager" class="swiper-pagination"></div>' +
  941. '</div>',
  942. changeDetection: ChangeDetectionStrategy.OnPush,
  943. encapsulation: ViewEncapsulation.None,
  944. },] },
  945. ];
  946. /** @nocollapse */
  947. Slides.ctorParameters = function () { return [
  948. { type: Config, },
  949. { type: Platform, },
  950. { type: NgZone, },
  951. { type: ViewController, decorators: [{ type: Optional },] },
  952. { type: ElementRef, },
  953. { type: Renderer, },
  954. ]; };
  955. Slides.propDecorators = {
  956. 'autoplay': [{ type: Input },],
  957. 'control': [{ type: Input },],
  958. 'effect': [{ type: Input },],
  959. 'direction': [{ type: Input },],
  960. 'initialSlide': [{ type: Input },],
  961. 'loop': [{ type: Input },],
  962. 'pager': [{ type: Input },],
  963. 'dir': [{ type: Input },],
  964. 'paginationType': [{ type: Input },],
  965. 'parallax': [{ type: Input },],
  966. 'speed': [{ type: Input },],
  967. 'zoom': [{ type: Input },],
  968. 'spaceBetween': [{ type: Input },],
  969. 'slidesPerView': [{ type: Input },],
  970. 'centeredSlides': [{ type: Input },],
  971. 'ionSlideWillChange': [{ type: Output },],
  972. 'ionSlideDidChange': [{ type: Output },],
  973. 'ionSlideDrag': [{ type: Output },],
  974. 'ionSlideReachStart': [{ type: Output },],
  975. 'ionSlideReachEnd': [{ type: Output },],
  976. 'ionSlideAutoplay': [{ type: Output },],
  977. 'ionSlideAutoplayStart': [{ type: Output },],
  978. 'ionSlideAutoplayStop': [{ type: Output },],
  979. 'ionSlideNextStart': [{ type: Output },],
  980. 'ionSlidePrevStart': [{ type: Output },],
  981. 'ionSlideNextEnd': [{ type: Output },],
  982. 'ionSlidePrevEnd': [{ type: Output },],
  983. 'ionSlideTap': [{ type: Output },],
  984. 'ionSlideDoubleTap': [{ type: Output },],
  985. };
  986. return Slides;
  987. }(Ion));
  988. export { Slides };
  989. var slidesId = -1;
  990. //# sourceMappingURL=slides.js.map