mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 02:31:34 +08:00
perf(slides): tree-shake dependency
This commit is contained in:
Manu Mtz.-Almeida
@ -33,6 +33,7 @@
|
||||
"@stencil/sass": "0.1.0",
|
||||
"@stencil/utils": "latest",
|
||||
"@types/jest": "^23.3.1",
|
||||
"@types/swiper": "4.2.1",
|
||||
"agadoo": "^1.0.0",
|
||||
"autoprefixer": "^9.0.2",
|
||||
"chromedriver": "^2.38.3",
|
||||
@ -44,6 +45,7 @@
|
||||
"selenium-webdriver": "^3.6.0",
|
||||
"stylelint": "^9.4.0",
|
||||
"stylelint-order": "^0.8.1",
|
||||
"swiper": "4.3.5",
|
||||
"tslint": "^5.10.0",
|
||||
"tslint-ionic-rules": "0.0.19",
|
||||
"tslint-react": "^3.6.0",
|
||||
|
||||
62
core/src/components.d.ts
vendored
62
core/src/components.d.ts
vendored
@ -4167,7 +4167,9 @@ export namespace Components {
|
||||
}
|
||||
|
||||
interface IonSlide {}
|
||||
interface IonSlideAttributes extends StencilHTMLAttributes {}
|
||||
interface IonSlideAttributes extends StencilHTMLAttributes {
|
||||
'onIonSlideChanged'?: (event: CustomEvent<void>) => void;
|
||||
}
|
||||
|
||||
interface IonSlides {
|
||||
/**
|
||||
@ -4193,15 +4195,19 @@ export namespace Components {
|
||||
/**
|
||||
* Lock or unlock the ability to slide to the next slides.
|
||||
*/
|
||||
'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => void;
|
||||
'lockSwipeToNext': (shouldLockSwipeToNext: boolean) => Promise<void>;
|
||||
/**
|
||||
* Lock or unlock the ability to slide to the previous slides.
|
||||
*/
|
||||
'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => void;
|
||||
'lockSwipeToPrev': (shouldLockSwipeToPrev: boolean) => Promise<void>;
|
||||
/**
|
||||
* Lock or unlock the ability to slide to change slides.
|
||||
*/
|
||||
'lockSwipes': (shouldLockSwipes: boolean) => void;
|
||||
'lockSwipes': (shouldLockSwipes: boolean) => Promise<void>;
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode': Mode;
|
||||
/**
|
||||
* Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
|
||||
*/
|
||||
@ -4217,93 +4223,97 @@ export namespace Components {
|
||||
/**
|
||||
* Transition to the next slide.
|
||||
*/
|
||||
'slideNext': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
|
||||
'slideNext': (speed: number, runCallbacks: boolean) => Promise<void>;
|
||||
/**
|
||||
* Transition to the previous slide.
|
||||
*/
|
||||
'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
|
||||
'slidePrev': (speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
|
||||
/**
|
||||
* Transition to the specified slide.
|
||||
*/
|
||||
'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => void;
|
||||
'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise<void>;
|
||||
/**
|
||||
* Start auto play.
|
||||
*/
|
||||
'startAutoplay': () => void;
|
||||
'startAutoplay': () => Promise<void>;
|
||||
/**
|
||||
* Stop auto play.
|
||||
*/
|
||||
'stopAutoplay': () => void;
|
||||
'stopAutoplay': () => Promise<void>;
|
||||
/**
|
||||
* Update the underlying slider implementation. Call this if you've added or removed child slides.
|
||||
*/
|
||||
'update': () => void;
|
||||
'update': () => Promise<void>;
|
||||
}
|
||||
interface IonSlidesAttributes extends StencilHTMLAttributes {
|
||||
/**
|
||||
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
'mode'?: Mode;
|
||||
/**
|
||||
* Emitted after the active slide has changed.
|
||||
*/
|
||||
'onIonSlideDidChange'?: (event: CustomEvent) => void;
|
||||
'onIonSlideDidChange'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the user double taps on the slide's container.
|
||||
*/
|
||||
'onIonSlideDoubleTap'?: (event: CustomEvent) => void;
|
||||
'onIonSlideDoubleTap'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the slider is actively being moved.
|
||||
*/
|
||||
'onIonSlideDrag'?: (event: CustomEvent) => void;
|
||||
'onIonSlideDrag'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the next slide has ended.
|
||||
*/
|
||||
'onIonSlideNextEnd'?: (event: CustomEvent) => void;
|
||||
'onIonSlideNextEnd'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the next slide has started.
|
||||
*/
|
||||
'onIonSlideNextStart'?: (event: CustomEvent) => void;
|
||||
'onIonSlideNextStart'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the previous slide has ended.
|
||||
*/
|
||||
'onIonSlidePrevEnd'?: (event: CustomEvent) => void;
|
||||
'onIonSlidePrevEnd'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the previous slide has started.
|
||||
*/
|
||||
'onIonSlidePrevStart'?: (event: CustomEvent) => void;
|
||||
'onIonSlidePrevStart'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the slider is at the last slide.
|
||||
*/
|
||||
'onIonSlideReachEnd'?: (event: CustomEvent) => void;
|
||||
'onIonSlideReachEnd'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the slider is at its initial position.
|
||||
*/
|
||||
'onIonSlideReachStart'?: (event: CustomEvent) => void;
|
||||
'onIonSlideReachStart'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the user taps/clicks on the slide's container.
|
||||
*/
|
||||
'onIonSlideTap'?: (event: CustomEvent) => void;
|
||||
'onIonSlideTap'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the user releases the touch.
|
||||
*/
|
||||
'onIonSlideTouchEnd'?: (event: CustomEvent) => void;
|
||||
'onIonSlideTouchEnd'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the user first touches the slider.
|
||||
*/
|
||||
'onIonSlideTouchStart'?: (event: CustomEvent) => void;
|
||||
'onIonSlideTouchStart'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the slide transition has ended.
|
||||
*/
|
||||
'onIonSlideTransitionEnd'?: (event: CustomEvent) => void;
|
||||
'onIonSlideTransitionEnd'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted when the slide transition has started.
|
||||
*/
|
||||
'onIonSlideTransitionStart'?: (event: CustomEvent) => void;
|
||||
'onIonSlideTransitionStart'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted before the active slide has changed.
|
||||
*/
|
||||
'onIonSlideWillChange'?: (event: CustomEvent) => void;
|
||||
'onIonSlideWillChange'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Emitted after Swiper initialization
|
||||
*/
|
||||
'onIonSlidesDidLoad'?: (event: CustomEvent) => void;
|
||||
'onIonSlidesDidLoad'?: (event: CustomEvent<void>) => void;
|
||||
/**
|
||||
* Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options
|
||||
*/
|
||||
|
||||
@ -10,6 +10,13 @@ See the [Slides API Docs](../slides) for more usage information.
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description |
|
||||
| ----------------- | ----------- |
|
||||
| `ionSlideChanged` | |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Component } from '@stencil/core';
|
||||
import { Component, Event } from '@stencil/core';
|
||||
import { EventEmitter } from 'ionicons/dist/types/stencil.core';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-slide',
|
||||
@ -6,13 +7,21 @@ import { Component } from '@stencil/core';
|
||||
})
|
||||
export class Slide {
|
||||
|
||||
@Event() ionSlideChanged!: EventEmitter<void>;
|
||||
|
||||
componentDidLoad() {
|
||||
this.ionSlideChanged.emit();
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.ionSlideChanged.emit();
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
'slide-zoom': true,
|
||||
'swiper-slide': true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@ Licensed under MIT
|
||||
|
||||
| Property | Attribute | Description | Type |
|
||||
| ----------- | ----------- | -------------------------------------------------------------------------------------------- | --------- |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
|
||||
| `options` | -- | Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options | `any` |
|
||||
| `pager` | `pager` | If true, show the pagination. Defaults to `false`. | `boolean` |
|
||||
| `scrollbar` | `scrollbar` | If true, show the scrollbar. Defaults to `false`. | `boolean` |
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/**
|
||||
* Swiper 4.2.6
|
||||
* Swiper 4.3.5
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* http://www.idangero.us/swiper/
|
||||
*
|
||||
@ -7,7 +7,7 @@
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: May 1, 2018
|
||||
* Released on: July 31, 2018
|
||||
*/
|
||||
.swiper-container {
|
||||
margin: 0 auto;
|
||||
@ -272,7 +272,8 @@
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
button.swiper-pagination-bullet {
|
||||
border: none;
|
||||
@ -288,6 +289,7 @@ button.swiper-pagination-bullet {
|
||||
cursor: pointer;
|
||||
}
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: #007aff;
|
||||
}
|
||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// iOS Slides
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
.slides-ios {
|
||||
--bullet-background: #{$slides-ios-bullet-background};
|
||||
--bullet-background-active: #{$slides-ios-bullet-background-active};
|
||||
--progress-bar-background: #{$slides-ios-progress-bar-background};
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
// Material Design Slides
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
.slides-md {
|
||||
--bullet-background: #{$slides-md-bullet-background};
|
||||
--bullet-background-active: #{$slides-md-bullet-background-active};
|
||||
--progress-bar-background: #{$slides-md-progress-bar-background};
|
||||
|
||||
@ -4,23 +4,16 @@
|
||||
// Slides
|
||||
// --------------------------------------------------
|
||||
|
||||
:host {
|
||||
.slides {
|
||||
/**
|
||||
* @prop --bullet-background: Background of the pagination bullets
|
||||
* @prop --bullet-background-active: Background of the active pagination bullet
|
||||
*/
|
||||
|
||||
// TODO: document progress and scroll bar properties once they're working
|
||||
|
||||
display: block;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
// Pagination Bullets
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -1,109 +1,34 @@
|
||||
import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
|
||||
import { Component, Element, Event, EventEmitter, Method, Prop, Watch, Listen } from '@stencil/core';
|
||||
|
||||
import { Mode } from '../../interface.js';
|
||||
import { Mode } from '../../interface';
|
||||
import { rIC } from '../../utils/helpers.js';
|
||||
import { createThemedClasses } from '../../utils/theme.js';
|
||||
|
||||
import { Swiper } from './vendor/swiper.js';
|
||||
import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-slides',
|
||||
styleUrls: {
|
||||
ios: 'slides.ios.scss',
|
||||
md: 'slides.md.scss'
|
||||
},
|
||||
assetsDir: 'vendor',
|
||||
shadow: true
|
||||
}
|
||||
})
|
||||
export class Slides {
|
||||
|
||||
private container!: HTMLElement;
|
||||
private swiper: any;
|
||||
private scrollbarEl?: HTMLElement;
|
||||
private paginationEl?: HTMLElement;
|
||||
private didInit = false;
|
||||
|
||||
private readyResolve: any;
|
||||
private readyPromise: Promise<boolean> = new Promise(resolve => { this.readyResolve = resolve; });
|
||||
|
||||
mode!: Mode;
|
||||
private readySwiper!: (swiper: SwiperInterface) => void;
|
||||
private swiper: Promise<SwiperInterface> = new Promise(resolve => { this.readySwiper = resolve; });
|
||||
|
||||
@Element() el!: HTMLStencilElement;
|
||||
|
||||
/**
|
||||
* Emitted after Swiper initialization
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@Event() ionSlidesDidLoad!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the user taps/clicks on the slide's container.
|
||||
*/
|
||||
@Event() ionSlideTap!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the user double taps on the slide's container.
|
||||
*/
|
||||
@Event() ionSlideDoubleTap!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted before the active slide has changed.
|
||||
*/
|
||||
@Event() ionSlideWillChange!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted after the active slide has changed.
|
||||
*/
|
||||
@Event() ionSlideDidChange!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the next slide has started.
|
||||
*/
|
||||
@Event() ionSlideNextStart!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the previous slide has started.
|
||||
*/
|
||||
@Event() ionSlidePrevStart!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the next slide has ended.
|
||||
*/
|
||||
@Event() ionSlideNextEnd!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the previous slide has ended.
|
||||
*/
|
||||
@Event() ionSlidePrevEnd!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the slide transition has started.
|
||||
*/
|
||||
@Event() ionSlideTransitionStart!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the slide transition has ended.
|
||||
*/
|
||||
@Event() ionSlideTransitionEnd!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the slider is actively being moved.
|
||||
*/
|
||||
@Event() ionSlideDrag!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the slider is at its initial position.
|
||||
*/
|
||||
@Event() ionSlideReachStart!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the slider is at the last slide.
|
||||
*/
|
||||
@Event() ionSlideReachEnd!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the user first touches the slider.
|
||||
*/
|
||||
@Event() ionSlideTouchStart!: EventEmitter;
|
||||
|
||||
/**
|
||||
* Emitted when the user releases the touch.
|
||||
*/
|
||||
@Event() ionSlideTouchEnd!: EventEmitter;
|
||||
@Prop() mode!: Mode;
|
||||
|
||||
/**
|
||||
* Options to pass to the swiper instance.
|
||||
@ -112,10 +37,10 @@ export class Slides {
|
||||
@Prop() options: any = {}; // SwiperOptions; // TODO
|
||||
|
||||
@Watch('options')
|
||||
updateSwiperOptions() {
|
||||
const newOptions = this.normalizeOptions();
|
||||
this.swiper.params = { ...this.swiper.params, ...newOptions };
|
||||
this.update();
|
||||
async updateSwiperOptions() {
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.params = this.normalizeOptions();
|
||||
await this.update();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -128,20 +53,100 @@ export class Slides {
|
||||
*/
|
||||
@Prop() scrollbar = false;
|
||||
|
||||
/**
|
||||
* Emitted after Swiper initialization
|
||||
*/
|
||||
@Event() ionSlidesDidLoad!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the user taps/clicks on the slide's container.
|
||||
*/
|
||||
@Event() ionSlideTap!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the user double taps on the slide's container.
|
||||
*/
|
||||
@Event() ionSlideDoubleTap!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted before the active slide has changed.
|
||||
*/
|
||||
@Event() ionSlideWillChange!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted after the active slide has changed.
|
||||
*/
|
||||
@Event() ionSlideDidChange!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the next slide has started.
|
||||
*/
|
||||
@Event() ionSlideNextStart!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the previous slide has started.
|
||||
*/
|
||||
@Event() ionSlidePrevStart!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the next slide has ended.
|
||||
*/
|
||||
@Event() ionSlideNextEnd!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the previous slide has ended.
|
||||
*/
|
||||
@Event() ionSlidePrevEnd!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the slide transition has started.
|
||||
*/
|
||||
@Event() ionSlideTransitionStart!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the slide transition has ended.
|
||||
*/
|
||||
@Event() ionSlideTransitionEnd!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the slider is actively being moved.
|
||||
*/
|
||||
@Event() ionSlideDrag!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the slider is at its initial position.
|
||||
*/
|
||||
@Event() ionSlideReachStart!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the slider is at the last slide.
|
||||
*/
|
||||
@Event() ionSlideReachEnd!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the user first touches the slider.
|
||||
*/
|
||||
@Event() ionSlideTouchStart!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the user releases the touch.
|
||||
*/
|
||||
@Event() ionSlideTouchEnd!: EventEmitter<void>;
|
||||
|
||||
componentDidLoad() {
|
||||
setTimeout(this.initSlides.bind(this), 10);
|
||||
rIC(() => this.initSwiper());
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.swiper.destroy(true, true);
|
||||
async componentDidUnload() {
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.destroy(true, true);
|
||||
}
|
||||
|
||||
private initSlides() {
|
||||
this.container = (this.el.shadowRoot || this.el).querySelector('.swiper-container') as HTMLElement;
|
||||
const finalOptions = this.normalizeOptions();
|
||||
// init swiper core
|
||||
this.swiper = new Swiper(this.container, finalOptions);
|
||||
this.readyResolve(true);
|
||||
@Listen('ionSlideChanged')
|
||||
onSlideChanged() {
|
||||
if (this.didInit) {
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -150,8 +155,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async update() {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.update();
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.update();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -159,17 +164,17 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async slideTo(index: number, speed?: number, runCallbacks?: boolean) {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.slideTo(index, speed, runCallbacks);
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.slideTo(index, speed, runCallbacks);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transition to the next slide.
|
||||
*/
|
||||
@Method()
|
||||
async slideNext(speed?: number, runCallbacks?: boolean) {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.slideNext(speed, runCallbacks);
|
||||
async slideNext(speed: number, runCallbacks: boolean) {
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.slideNext(speed, runCallbacks);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -177,8 +182,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async slidePrev(speed?: number, runCallbacks?: boolean) {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.slidePrev(speed, runCallbacks);
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.slidePrev(speed, runCallbacks);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -186,8 +191,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async getActiveIndex(): Promise<number> {
|
||||
await this.waitUntilReady();
|
||||
return Promise.resolve(this.swiper.activeIndex);
|
||||
const swiper = await this.getSwiper();
|
||||
return swiper.activeIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -195,8 +200,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async getPreviousIndex(): Promise<number> {
|
||||
await this.waitUntilReady();
|
||||
return Promise.resolve(this.swiper.previousIndex);
|
||||
const swiper = await this.getSwiper();
|
||||
return swiper.previousIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -204,8 +209,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async length(): Promise<number> {
|
||||
await this.waitUntilReady();
|
||||
return Promise.resolve(this.swiper.slides.length);
|
||||
const swiper = await this.getSwiper();
|
||||
return swiper.slides.length;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -214,8 +219,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async isEnd(): Promise<boolean> {
|
||||
await this.waitUntilReady();
|
||||
return Promise.resolve(this.swiper.isEnd);
|
||||
const swiper = await this.getSwiper();
|
||||
return swiper.isEnd;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -223,8 +228,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async isBeginning(): Promise<boolean> {
|
||||
await this.waitUntilReady();
|
||||
return Promise.resolve(this.swiper.isBeginning);
|
||||
const swiper = await this.getSwiper();
|
||||
return swiper.isBeginning;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -232,8 +237,10 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async startAutoplay() {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.autoplay.start();
|
||||
const swiper = await this.getSwiper();
|
||||
if (swiper.autoplay) {
|
||||
swiper.autoplay.start();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -241,8 +248,10 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async stopAutoplay() {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.autoplay.stop();
|
||||
const swiper = await this.getSwiper();
|
||||
if (swiper.autoplay) {
|
||||
swiper.autoplay.stop();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -250,8 +259,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async lockSwipeToNext(shouldLockSwipeToNext: boolean) {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.allowSlideNext = !shouldLockSwipeToNext;
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.allowSlideNext = !shouldLockSwipeToNext;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -259,8 +268,8 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.allowSlidePrev = !shouldLockSwipeToPrev;
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.allowSlidePrev = !shouldLockSwipeToPrev;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -268,39 +277,35 @@ export class Slides {
|
||||
*/
|
||||
@Method()
|
||||
async lockSwipes(shouldLockSwipes: boolean) {
|
||||
await this.waitUntilReady();
|
||||
this.swiper.allowSlideNext = !shouldLockSwipes;
|
||||
this.swiper.allowSlidePrev = !shouldLockSwipes;
|
||||
this.swiper.allowTouchMove = !shouldLockSwipes;
|
||||
|
||||
const swiper = await this.getSwiper();
|
||||
swiper.allowSlideNext = !shouldLockSwipes;
|
||||
swiper.allowSlidePrev = !shouldLockSwipes;
|
||||
swiper.allowTouchMove = !shouldLockSwipes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calls true if the swiper core is initialized
|
||||
*/
|
||||
private waitUntilReady(): Promise<boolean> {
|
||||
return this.readyPromise;
|
||||
private async initSwiper() {
|
||||
const finalOptions = this.normalizeOptions();
|
||||
|
||||
// init swiper core
|
||||
const { Swiper } = await import('./swiper/swiper');
|
||||
const swiper = new Swiper(this.el, finalOptions);
|
||||
this.didInit = true;
|
||||
this.readySwiper(swiper);
|
||||
}
|
||||
|
||||
private normalizeOptions() {
|
||||
private getSwiper() {
|
||||
return this.swiper;
|
||||
}
|
||||
|
||||
private normalizeOptions(): SwiperOptions {
|
||||
// Base options, can be changed
|
||||
// TODO Add interface SwiperOptions
|
||||
const swiperOptions = {
|
||||
const swiperOptions: SwiperOptions = {
|
||||
effect: 'slide',
|
||||
direction: 'horizontal',
|
||||
initialSlide: 0,
|
||||
loop: false,
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
type: 'bullets',
|
||||
clickable: false,
|
||||
hideOnClick: false,
|
||||
},
|
||||
parallax: false,
|
||||
scrollbar: {
|
||||
el: this.scrollbar ? '.swiper-scrollbar' : undefined,
|
||||
hide: true,
|
||||
},
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 0,
|
||||
speed: 300,
|
||||
@ -353,11 +358,6 @@ export class Slides {
|
||||
loopAdditionalSlides: 0,
|
||||
noSwiping: true,
|
||||
runCallbacksOnInit: true,
|
||||
controller: {
|
||||
control: this.swiper,
|
||||
by: 'slide',
|
||||
inverse: false,
|
||||
},
|
||||
coverflowEffect: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
@ -376,7 +376,7 @@ export class Slides {
|
||||
shadowScale: 0.94
|
||||
},
|
||||
fadeEffect: {
|
||||
crossFade: false
|
||||
crossfade: false
|
||||
},
|
||||
a11y: {
|
||||
prevSlideMessage: 'Previous slide',
|
||||
@ -386,9 +386,25 @@ export class Slides {
|
||||
}
|
||||
};
|
||||
|
||||
if (this.pager) {
|
||||
swiperOptions.pagination = {
|
||||
el: this.paginationEl!,
|
||||
type: 'bullets',
|
||||
clickable: false,
|
||||
hideOnClick: false,
|
||||
};
|
||||
}
|
||||
|
||||
if (this.scrollbar) {
|
||||
swiperOptions.scrollbar = {
|
||||
el: this.scrollbarEl!,
|
||||
hide: true,
|
||||
};
|
||||
}
|
||||
|
||||
// Keep the event options separate, we dont want users
|
||||
// overwriting these
|
||||
const eventOptions = {
|
||||
const eventOptions: SwiperOptions = {
|
||||
on: {
|
||||
init: () => {
|
||||
setTimeout(() => {
|
||||
@ -417,15 +433,22 @@ export class Slides {
|
||||
return { ...swiperOptions, ...this.options, ...eventOptions };
|
||||
}
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: {
|
||||
...createThemedClasses(this.mode, 'slides'),
|
||||
'swiper-container': true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="swiper-container" ref={el => this.container = el as HTMLElement}>
|
||||
return [
|
||||
<div class="swiper-wrapper">
|
||||
<slot></slot>
|
||||
</div>
|
||||
{this.pager ? <div class="swiper-pagination"></div> : null}
|
||||
{this.scrollbar ? <div class="swiper-scrollbar"></div> : null}
|
||||
</div>
|
||||
);
|
||||
</div>,
|
||||
this.pager && <div class="swiper-pagination" ref={el => this.paginationEl = el}></div>,
|
||||
this.scrollbar && <div class="swiper-scrollbar" ref={el => this.scrollbarEl = el}></div>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
1
core/src/components/slides/swiper/swiper-interface.d.ts
vendored
Normal file
1
core/src/components/slides/swiper/swiper-interface.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
export { Swiper as SwiperInterface, SwiperOptions } from 'swiper/dist/js/swiper.esm';
|
||||
4
core/src/components/slides/swiper/swiper.ts
Normal file
4
core/src/components/slides/swiper/swiper.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { Pagination, Scrollbar, Swiper } from 'swiper/dist/js/swiper.esm';
|
||||
|
||||
Swiper.use([Pagination, Scrollbar]);
|
||||
export { Swiper };
|
||||
458
core/src/components/slides/vendor/swiper.d.ts
vendored
458
core/src/components/slides/vendor/swiper.d.ts
vendored
@ -1,458 +0,0 @@
|
||||
// Type definitions for Swiper 4.2
|
||||
// Project: https://github.com/nolimits4web/Swiper
|
||||
// Definitions by: Sebastián Galiano <https://github.com/sgaliano>, Luca Trazzi <https://github.com/lucax88x>, Eugene Matseruk <https://github.com/ematseruk>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.7
|
||||
|
||||
type CommonEvent =
|
||||
| 'init'
|
||||
| 'beforeDestroy'
|
||||
| 'slideChange'
|
||||
| 'slideChangeTransitionStart'
|
||||
| 'slideChangeTransitionEnd'
|
||||
| 'slideNextTransitionStart'
|
||||
| 'slideNextTransitionEnd'
|
||||
| 'slidePrevTransitionStart'
|
||||
| 'slidePrevTransitionEnd'
|
||||
| 'transitionStart'
|
||||
| 'transitionEnd'
|
||||
| 'touchStart'
|
||||
| 'touchMove'
|
||||
| 'touchMoveOpposite'
|
||||
| 'sliderMove'
|
||||
| 'touchEnd'
|
||||
| 'click'
|
||||
| 'tap'
|
||||
| 'doubleTap'
|
||||
| 'imagesReady'
|
||||
| 'progress'
|
||||
| 'reachBeginning'
|
||||
| 'reachEnd'
|
||||
| 'fromEdge'
|
||||
| 'setTranslate'
|
||||
| 'setTransition'
|
||||
| 'resize';
|
||||
|
||||
type PaginationEvent = 'paginationRender' | 'paginationUpdate';
|
||||
type AutoplayEvent = 'autoplayStart' | 'autoplayStop' | 'autoplay';
|
||||
type LazyLoadingEvent = 'lazyImageLoad' | 'lazyImageReady';
|
||||
|
||||
type SwiperEvent = CommonEvent | PaginationEvent | AutoplayEvent | LazyLoadingEvent;
|
||||
|
||||
interface NavigationOptions {
|
||||
nextEl?: string | HTMLElement;
|
||||
prevEl?: string | HTMLElement;
|
||||
hideOnClick?: boolean;
|
||||
disabledClass?: string;
|
||||
hiddenClass?: string;
|
||||
}
|
||||
|
||||
interface PaginationOptions {
|
||||
el?: string;
|
||||
type?: 'bullets' | 'fraction' | 'progressbar' | 'custom';
|
||||
bulletElement?: string;
|
||||
dynamicBullets?: boolean;
|
||||
dynamicMainBullets?: number;
|
||||
hideOnClick?: boolean;
|
||||
clickable?: boolean;
|
||||
progressbarOpposite?: boolean;
|
||||
|
||||
bulletClass?: string;
|
||||
bulletActiveClass?: string;
|
||||
modifierClass?: string;
|
||||
currentClass?: string;
|
||||
totalClass?: string;
|
||||
hiddenClass?: string;
|
||||
progressbarFillClass?: string;
|
||||
clickableClass?: string;
|
||||
|
||||
renderBullet?: (index: number, className: string) => void;
|
||||
renderFraction?: (currentClass: string, totalClass: string) => void;
|
||||
renderProgressbar?: (progressbarFillClass: string) => void;
|
||||
renderCustom?: (swiper: Swiper, current: number, total: number) => void;
|
||||
}
|
||||
|
||||
interface ScrollbarOptions {
|
||||
el?: string | HTMLElement;
|
||||
hide?: boolean;
|
||||
draggable?: boolean;
|
||||
snapOnRelease?: boolean;
|
||||
dragSize?: 'auto' | number;
|
||||
lockClass?: 'string';
|
||||
dragClass?: 'string';
|
||||
}
|
||||
|
||||
interface AutoplayOptions {
|
||||
delay?: number;
|
||||
stopOnLastSlide?: boolean;
|
||||
disableOnInteraction?: boolean;
|
||||
reverseDirection?: boolean;
|
||||
waitForTransition?: boolean;
|
||||
}
|
||||
|
||||
interface LazyLoadingOptions {
|
||||
loadPrevNext?: string;
|
||||
loadPrevNextAmount?: number;
|
||||
loadOnTransitionStart?: boolean;
|
||||
elementClass?: string;
|
||||
loadingClass?: string;
|
||||
loadedClass?: string;
|
||||
preloaderClass?: string;
|
||||
}
|
||||
|
||||
interface FadeEffectOptions {
|
||||
crossFade: boolean;
|
||||
}
|
||||
|
||||
interface CoverflowEffectOptions {
|
||||
slideShadows?: boolean;
|
||||
rotate?: number;
|
||||
stretch?: number;
|
||||
depth?: number;
|
||||
modifier?: number;
|
||||
}
|
||||
|
||||
interface FlipEffectOptions {
|
||||
slideShadows?: boolean;
|
||||
limitRotation?: boolean;
|
||||
}
|
||||
|
||||
interface CubeEffectOptions {
|
||||
slideShadows?: boolean;
|
||||
shadow?: boolean;
|
||||
shadowOffset: number;
|
||||
shadowScale: number;
|
||||
}
|
||||
|
||||
interface ZoomOptions {
|
||||
maxRatio?: number;
|
||||
minRatio?: number;
|
||||
toggle?: boolean;
|
||||
containerClass?: string;
|
||||
zoomedSlideClass?: string;
|
||||
}
|
||||
|
||||
interface KeyboardControlOptions {
|
||||
enabled?: boolean;
|
||||
onlyInViewport?: boolean;
|
||||
}
|
||||
|
||||
interface MouseWheelControlOptions {
|
||||
forceToAxis?: boolean;
|
||||
releaseOnEdges?: boolean;
|
||||
invert?: boolean;
|
||||
sensitivity?: number;
|
||||
eventsTarged?: string | HTMLElement;
|
||||
}
|
||||
|
||||
interface VirtualSlidesRenderExternalData {
|
||||
offset: number;
|
||||
from: number;
|
||||
to: number;
|
||||
slides: any[];
|
||||
}
|
||||
|
||||
interface VirtualSlidesOptions {
|
||||
slides?: any[];
|
||||
cache?: boolean;
|
||||
renderSlide?: (slide: any, index: number) => void;
|
||||
renderExternal?: (data: VirtualSlidesRenderExternalData) => void;
|
||||
}
|
||||
|
||||
interface HashNavigationOptions {
|
||||
watchState?: boolean;
|
||||
replaceState?: boolean;
|
||||
}
|
||||
|
||||
interface HistoryNavigationOptions {
|
||||
replaceState?: boolean;
|
||||
key?: string;
|
||||
}
|
||||
|
||||
interface ControllerOptions {
|
||||
control: Swiper;
|
||||
inverse: boolean;
|
||||
by: 'slide' | 'container';
|
||||
}
|
||||
|
||||
interface AccessibilityOptions {
|
||||
enabled?: boolean;
|
||||
prevSlideMessage?: string;
|
||||
nextSlideMessage?: string;
|
||||
firstSlideMessage?: string;
|
||||
lastSlideMessage?: string;
|
||||
paginationBulletMessage?: string;
|
||||
notificationClass?: string;
|
||||
}
|
||||
|
||||
export interface SwiperOptions {
|
||||
// General parameters
|
||||
init?: boolean;
|
||||
initialSlide?: number;
|
||||
direction?: 'horizontal' | 'vertical';
|
||||
speed?: number;
|
||||
setWrapperSize?: boolean;
|
||||
virtualTranslate?: boolean;
|
||||
width?: number;
|
||||
height?: number;
|
||||
autoHeight?: boolean;
|
||||
roundLengths?: boolean;
|
||||
nested?: boolean;
|
||||
uniqueNavElements?: boolean;
|
||||
effect?: 'slide' | 'fade' | 'cube' | 'coverflow' | 'flip';
|
||||
runCallbacksOnInit?: boolean;
|
||||
watchOverflow?: boolean;
|
||||
on?: {[key in SwiperEvent]?: () => void };
|
||||
|
||||
// Slides grid
|
||||
spaceBetween?: number;
|
||||
slidesPerView?: 'auto' | number;
|
||||
slidesPerColumn?: number;
|
||||
slidesPerColumnFill?: 'row' | 'column';
|
||||
slidesPerGroup?: number;
|
||||
centeredSlides?: boolean;
|
||||
slidesOffsetBefore?: number;
|
||||
slidesOffsetAfter?: number;
|
||||
normalizeSlideIndex?: boolean;
|
||||
|
||||
// Grab cursor
|
||||
grabCursor?: boolean;
|
||||
|
||||
// Touches
|
||||
touchEventsTarget?: 'container' | 'wrapper';
|
||||
touchRatio?: number;
|
||||
touchAngle?: number;
|
||||
simulateTouch?: boolean;
|
||||
shortSwipes?: boolean;
|
||||
longSwipes?: boolean;
|
||||
longSwipesRatio?: number;
|
||||
longSwipesMs?: number;
|
||||
followFinger?: boolean;
|
||||
allowTouchMove?: boolean;
|
||||
threshold?: number;
|
||||
touchMoveStopPropagation?: boolean;
|
||||
iOSEdgeSwipeDetection?: boolean;
|
||||
iOSEdgeSwipeThreshold?: number;
|
||||
touchReleaseOnEdges?: boolean;
|
||||
passiveListeners?: boolean;
|
||||
|
||||
// Touch Resistance
|
||||
resistance?: boolean;
|
||||
resistanceRatio?: number;
|
||||
|
||||
// Swiping / No swiping
|
||||
preventIntercationOnTransition?: boolean;
|
||||
allowSlidePrev?: boolean;
|
||||
allowSlideNext?: boolean;
|
||||
noSwiping?: boolean;
|
||||
noSwipingClass?: string;
|
||||
noSwipingSelector?: string;
|
||||
swipeHandler?: string | HTMLElement;
|
||||
|
||||
// Clicks
|
||||
preventClicks?: boolean;
|
||||
preventClicksPropagation?: boolean;
|
||||
slideToClickedSlide?: boolean;
|
||||
|
||||
// Freemode
|
||||
freeMode?: boolean;
|
||||
freeModeMomentum?: boolean;
|
||||
freeModeMomentumRatio?: number;
|
||||
freeModeMomentumVelocityRatio?: number;
|
||||
freeModeMomentumBounce?: boolean;
|
||||
freeModeMomentumBounceRatio?: number;
|
||||
freeModeMinimumVelocity?: number;
|
||||
freeModeSticky?: boolean;
|
||||
|
||||
// Progress
|
||||
watchSlidesProgress?: boolean;
|
||||
watchSlidesVisibility?: boolean;
|
||||
|
||||
// Images
|
||||
preloadImages?: boolean;
|
||||
updateOnImagesReady?: boolean;
|
||||
// Loop
|
||||
loop?: boolean;
|
||||
loopAdditionalSlides?: number;
|
||||
loopedSlides?: number;
|
||||
loopFillGroupWithBlank?: boolean;
|
||||
|
||||
// Breakpoints
|
||||
breakpoints?: {
|
||||
// TODO: extract possible parameters for breakpoints to separate interface
|
||||
[index: number]: any;
|
||||
};
|
||||
|
||||
// Observer
|
||||
observer?: boolean;
|
||||
observeParents?: boolean;
|
||||
|
||||
// Namespace
|
||||
containerModifierClass?: string;
|
||||
slideClass?: string;
|
||||
slideActiveClass?: string;
|
||||
slideDuplicatedActiveClass?: string;
|
||||
slideVisibleClass?: string;
|
||||
slideDuplicateClass?: string;
|
||||
slideNextClass?: string;
|
||||
slideDuplicatedNextClass?: string;
|
||||
slidePrevClass?: string;
|
||||
slideDuplicatedPrevClass?: string;
|
||||
wrapperClass?: string;
|
||||
|
||||
// Components
|
||||
navigation?: NavigationOptions;
|
||||
pagination?: PaginationOptions;
|
||||
scrollbar?: ScrollbarOptions;
|
||||
autoplay?: AutoplayOptions;
|
||||
parallax?: boolean;
|
||||
lazy?: LazyLoadingOptions | boolean;
|
||||
fadeEffect?: FadeEffectOptions;
|
||||
coverflowEffect?: CoverflowEffectOptions;
|
||||
flipEffect?: FlipEffectOptions;
|
||||
cubeEffect?: CubeEffectOptions;
|
||||
zoom?: ZoomOptions | boolean;
|
||||
keyboard?: KeyboardControlOptions | boolean;
|
||||
mousewheel?: MouseWheelControlOptions | boolean;
|
||||
virtual?: VirtualSlidesOptions;
|
||||
hashNavigation?: HashNavigationOptions;
|
||||
history?: HistoryNavigationOptions;
|
||||
controller?: ControllerOptions;
|
||||
a11y?: AccessibilityOptions;
|
||||
}
|
||||
|
||||
interface Navigation {
|
||||
nextEl: HTMLElement;
|
||||
prevEl: HTMLElement;
|
||||
update: () => void;
|
||||
}
|
||||
interface Pagination {
|
||||
el: HTMLElement;
|
||||
// TODO: dom7 like array
|
||||
bullets: any[];
|
||||
|
||||
render: () => void;
|
||||
update: () => void;
|
||||
}
|
||||
|
||||
interface Scrollbar {
|
||||
eL: HTMLElement;
|
||||
dragEl: HTMLElement;
|
||||
|
||||
updateSize: () => void;
|
||||
}
|
||||
|
||||
interface Autoplay {
|
||||
running: boolean;
|
||||
|
||||
start: () => void;
|
||||
stop: () => void;
|
||||
}
|
||||
|
||||
interface LazyLoading {
|
||||
load: () => void;
|
||||
loadInSlide: (index: number) => void;
|
||||
}
|
||||
|
||||
interface Zoom {
|
||||
enabled: boolean;
|
||||
scale: number;
|
||||
|
||||
enable: () => void;
|
||||
disable: () => void;
|
||||
in: () => void;
|
||||
out: () => void;
|
||||
toggle: () => void;
|
||||
}
|
||||
|
||||
// Keyboard and Mousewheel control
|
||||
interface Control {
|
||||
enabled: boolean;
|
||||
|
||||
enable: () => void;
|
||||
disable: () => void;
|
||||
}
|
||||
|
||||
interface VirtualSlides {
|
||||
cache: any;
|
||||
from: number;
|
||||
to: number;
|
||||
slides: any[];
|
||||
|
||||
appendSlide: (slide: any) => void;
|
||||
prependSlide: (slide: any) => void;
|
||||
update: () => void;
|
||||
}
|
||||
|
||||
interface Controller {
|
||||
control: Swiper;
|
||||
}
|
||||
|
||||
export declare class Swiper {
|
||||
constructor(container: string | Element, parameters?: SwiperOptions);
|
||||
|
||||
// Properties
|
||||
params: SwiperOptions;
|
||||
// TODO: dom7 element
|
||||
$el: any;
|
||||
// TODO: dom7 element
|
||||
$wrapperEl: any;
|
||||
slides: HTMLElement[];
|
||||
width: number;
|
||||
height: number;
|
||||
translate: number;
|
||||
progress: number;
|
||||
activeIndex: number;
|
||||
realIndex: number;
|
||||
previousIndex: number;
|
||||
isBeginning: boolean;
|
||||
isEnd: boolean;
|
||||
animating: boolean;
|
||||
touches: {
|
||||
startX: number;
|
||||
startY: number;
|
||||
currentX: number;
|
||||
currentY: number;
|
||||
diff: number;
|
||||
};
|
||||
clickedIndex: number;
|
||||
clickedSlide: HTMLElement;
|
||||
allowSlideNext: boolean;
|
||||
allowSlidePrev: boolean;
|
||||
allowTouchMove: boolean;
|
||||
|
||||
slideNext: (speed?: number, runCallbacks?: boolean) => void;
|
||||
slidePrev: (speed?: number, runCallbacks?: boolean) => void;
|
||||
slideTo: (index: number, speed?: number, runCallbacks?: boolean) => void;
|
||||
slideToLoop: (index: number, speed?: number, runCallbacks?: boolean) => void;
|
||||
slideReset: (speed?: number, runCallbacks?: boolean) => void;
|
||||
slideToClosest: (speed?: number, runCallbacks?: boolean) => void;
|
||||
updateAutoHeight: (speed?: number) => void;
|
||||
update: () => void;
|
||||
detachEvents: () => void;
|
||||
attachEvents: () => void;
|
||||
destroy: (deleteInstance?: boolean, cleanStyles?: boolean) => void;
|
||||
appendSlide: (slides: Array<(HTMLElement | string)> | string | HTMLElement) => void;
|
||||
prependSlide: (slides: Array<(HTMLElement | string)> | string | HTMLElement) => void;
|
||||
removeSlide: (index: number) => void;
|
||||
removeAllSlides: () => void;
|
||||
setTranslate: (translate: number) => void;
|
||||
getTranslate: () => void;
|
||||
on: (event: SwiperEvent, handler: () => void) => void;
|
||||
once: (event: SwiperEvent, handler: () => void) => void;
|
||||
off: (event: SwiperEvent, handler?: () => void) => void;
|
||||
unsetGrabCursor: () => void;
|
||||
setGrabCursor: () => void;
|
||||
|
||||
// components
|
||||
navigation: Navigation;
|
||||
pagination: Pagination;
|
||||
scrollbar: Scrollbar;
|
||||
autoplay: Autoplay;
|
||||
zoom: Zoom;
|
||||
keyboard: Control;
|
||||
mousewheel: Control;
|
||||
virtual: VirtualSlides;
|
||||
controller: Controller;
|
||||
}
|
||||
|
||||
9660
core/src/components/slides/vendor/swiper.js
vendored
9660
core/src/components/slides/vendor/swiper.js
vendored
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user