Fixed up slider

This commit is contained in:
Max Lynch
2015-09-02 16:28:26 -05:00
parent 4e56032c37
commit b2555666f9
4 changed files with 3950 additions and 3971 deletions

View File

@ -196,7 +196,6 @@ button.swiper-pagination-bullet {
} }
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
opacity: 1; opacity: 1;
background: #007aff;
} }
.swiper-pagination-white .swiper-pagination-bullet-active { .swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff; background: #fff;
@ -218,7 +217,7 @@ button.swiper-pagination-bullet {
display: block; display: block;
} }
.swiper-container-horizontal > .swiper-pagination { .swiper-container-horizontal > .swiper-pagination {
bottom: 10px; bottom: 20px;
left: 0; left: 0;
width: 100%; width: 100%;
} }

View File

@ -48,7 +48,7 @@ import {Scroll} from '../scroll/scroll';
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<div [class.hide]="!pager" class="swiper-pagination"></div> <div [class.hide]="!showPager" class="swiper-pagination"></div>
</div>`, </div>`,
directives: [NgIf, NgClass] directives: [NgIf, NgClass]
}) })
@ -60,12 +60,18 @@ export class Slides extends Ion {
*/ */
constructor(elementRef: ElementRef, config: IonicConfig) { constructor(elementRef: ElementRef, config: IonicConfig) {
super(elementRef, config); super(elementRef, config);
this.rapidUpdate = util.debounce(() => {
this.update();
}, 10);
} }
onInit() { onInit() {
if(!this.options) { if(!this.options) {
this.options = {}; this.options = {};
} }
this.showPager = util.isTrueProperty(this.pager);
var options = util.defaults({ var options = util.defaults({
pagination: '.swiper-pagination', pagination: '.swiper-pagination',
paginationClickable: true, paginationClickable: true,
@ -94,11 +100,9 @@ export class Slides extends Ion {
return this.options.onTransitionEnd && this.options.onTransitionEnd(swiper, e); return this.options.onTransitionEnd && this.options.onTransitionEnd(swiper, e);
}; };
options.onSlideChangeStart = (swiper) => { options.onSlideChangeStart = (swiper) => {
console.log('Slide change!', swiper.previousIndex);
return this.options.onSlideChangeStart && this.options.onSlideChangeStart(swiper); return this.options.onSlideChangeStart && this.options.onSlideChangeStart(swiper);
}; };
options.onSlideChangeEnd = (swiper) => { options.onSlideChangeEnd = (swiper) => {
console.log('Slide changED!');
return this.options.onSlideChangeEnd && this.options.onSlideChangeEnd(swiper); return this.options.onSlideChangeEnd && this.options.onSlideChangeEnd(swiper);
}; };
options.onLazyImageLoad = (swiper, slide, img) => { options.onLazyImageLoad = (swiper, slide, img) => {
@ -125,32 +129,24 @@ export class Slides extends Ion {
} }
onTap(swiper, e) { onTap(swiper, e) {
console.log('Slide tap', swiper, e);
} }
onClick(swiper, e) { onClick(swiper, e) {
console.log('Slide click', swiper, e);
} }
onDoubleTap(swiper, e) { onDoubleTap(swiper, e) {
console.log('Slide double tap', swiper, e);
this.toggleZoom(swiper, e); this.toggleZoom(swiper, e);
} }
onLazyImageLoad(swiper, slide, img) { onLazyImageLoad(swiper, slide, img) {
console.log('Slide lazy load', swiper, slide, img);
} }
onLazyImageReady(swiper, slide, img) { onLazyImageReady(swiper, slide, img) {
console.log('Slide lazy ready', swiper, slide, img);
} }
/* /*
nextButton(swiper, e) { nextButton(swiper, e) {
console.log('Slide next button', swiper, e);
} }
prevButton() { prevButton() {
console.log('Slide prev button', swiper, e);
} }
indexButton() { indexButton() {
console.log('Slide index button', swiper, e);
} }
*/ */
@ -159,7 +155,6 @@ export class Slides extends Ion {
this.maxScale = this.zoomMax || 3; this.maxScale = this.zoomMax || 3;
this.zoomElement = this.getNativeElement().children[0].children[0]; this.zoomElement = this.getNativeElement().children[0].children[0];
console.log('Zooming', this.zoomElement);
this.zoomElement && this.zoomElement.classList.add('ion-scroll-zoom'); this.zoomElement && this.zoomElement.classList.add('ion-scroll-zoom');
@ -425,7 +420,7 @@ export class Slides extends Ion {
// Don't allow pager to show with > 10 slides // Don't allow pager to show with > 10 slides
if(this.swiper.slides.length > 10) { if(this.swiper.slides.length > 10) {
this.pager = false; this.showPager = false;
} }
}); });
} }
@ -452,10 +447,13 @@ export class Slide {
* @param {ElementRef} elementRef TODO * @param {ElementRef} elementRef TODO
*/ */
constructor( constructor(
elementRef: ElementRef elementRef: ElementRef,
@Host() slides: Slides
) { ) {
this.ele = elementRef.nativeElement; this.ele = elementRef.nativeElement;
this.ele.classList.add('swiper-slide'); this.ele.classList.add('swiper-slide');
slides.rapidUpdate();
} }
} }

View File

@ -12,13 +12,14 @@
* *
* Released on: August 22, 2015 * Released on: August 22, 2015
*/ */
(function () {
'use strict'; 'use strict';
var $; var $;
/*=========================== /*===========================
Swiper Swiper
===========================*/ ===========================*/
var Swiper = function (container, params) { export function Swiper(container, params) {
if (!(this instanceof Swiper)) return new Swiper(container, params); if (!(this instanceof Swiper)) return new Swiper(container, params);
var defaults = { var defaults = {
@ -3948,21 +3949,3 @@
}; };
} }
} }
window.Swiper = Swiper;
})();
/*===========================
Swiper AMD Export
===========================*/
if (typeof(module) !== 'undefined')
{
module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
define([], function () {
'use strict';
return window.Swiper;
});
}
export {Swiper};

View File

@ -1,6 +1,5 @@
<style> <style>
.slide { .slide {
padding-top: 80px;
color: #000; color: #000;
text-align: center; text-align: center;