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