Skip to content

Commit 18b347b

Browse files
liamdebeasiliamdebeasi
authored
fix(slides): allow zoom to work
fixes #17981
1 parent 29bb4fc commit 18b347b

File tree

3 files changed

+173
-1
lines changed

3 files changed

+173
-1
lines changed

‎core/src/components/slide/slide.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ export class Slide implements ComponentInterface {
2121
hostData() {
2222
return {
2323
class: {
24-
'swiper-slide': true
24+
'swiper-slide': true,
25+
'swiper-zoom-container': true
2526
}
2627
};
2728
}

‎core/src/components/slides/test/image/e2e.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { newE2EPage } from '@stencil/core/testing';
2+
3+
test('slides: image', async () => {
4+
const page = await newE2EPage({
5+
url: '/src/components/slides/test/image?ionic:_testing=true'
6+
});
7+
8+
await page.waitFor(500);
9+
10+
const compare = await page.compareScreenshot();
11+
expect(compare).toMatchScreenshot();
12+
});

‎core/src/components/slides/test/image/index.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html dir="ltr">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Slides - Image</title>
7+
8+
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
9+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
10+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
11+
<script src="../../../../../scripts/testing/scripts.js"></script>
12+
<script src="../../../../../dist/ionic.js"></script>
13+
<style>
14+
ion-slide {
15+
height: 200px !important;
16+
}
17+
18+
</style>
19+
</head>
20+
21+
<body>
22+
<ion-app>
23+
24+
<ion-content id="content">
25+
<ion-slides style="background: black" id="slides" pager>
26+
<ion-slide style="background: rgb(0, 200, 0); color: white;">
27+
<img src="http://lorempixel.com/400/200/cats/">
28+
</ion-slide>
29+
<ion-slide style="background: white; color: blue;">
30+
<img src="http://lorempixel.com/400/200/cats/">
31+
</ion-slide>
32+
<ion-slide style="background: blue; color: white;">
33+
<img src="http://lorempixel.com/400/200/cats/">
34+
</ion-slide>
35+
</ion-slides>
36+
<ion-button expand="block" onclick="slidePrev()">Slide Prev</ion-button>
37+
<ion-button expand="block" onclick="slideNext()">Slide Next</ion-button>
38+
<ion-button expand="block" onclick="getActiveIndex()">Get Active Index</ion-button>
39+
<ion-button expand="block" onclick="getPreviousIndex()">Get Previous Index</ion-button>
40+
41+
<ion-button expand="block" onclick="isEnd()">Is the End?</ion-button>
42+
<ion-button expand="block" onclick="isBeginning()">Is the beginning?</ion-button>
43+
44+
<ion-button expand="block" onclick="slideTo()">Slide to slide index 2</ion-button>
45+
<ion-button expand="block" onclick="slideLength()">Get slide length</ion-button>
46+
<ion-button expand="block" onclick="slideAutoPlay()">Start auto play</ion-button>
47+
<ion-button expand="block" onclick="slideStopAutoPlay()">Stop auto play</ion-button>
48+
<ion-button expand="block" onclick="setOptions()">Set options</ion-button>
49+
</ion-content>
50+
51+
</ion-app>
52+
<script>
53+
const slides = document.getElementById('slides')
54+
slides.pager = false;
55+
slides.options = {}
56+
57+
async function slideNext() {
58+
await slides.slideNext(500)
59+
};
60+
61+
async function slidePrev() {
62+
await slides.slidePrev(500);
63+
};
64+
65+
async function slideTo() {
66+
await slides.slideTo(2);
67+
}
68+
69+
async function slideAutoPlay() {
70+
slides.options = Object.assign({}, slides.options, {
71+
autoplay: {
72+
delay: 2500,
73+
disableOnInteraction: false
74+
}
75+
});
76+
await slides.startAutoplay();
77+
}
78+
79+
async function slideStopAutoPlay() {
80+
await slides.stopAutoplay();
81+
}
82+
83+
async function setOptions() {
84+
slides.options = Object.assign({}, slides.options, {
85+
slidesPerView: 2,
86+
});
87+
}
88+
89+
async function slideLength() {
90+
console.log(await slides.length());
91+
}
92+
93+
async function getActiveIndex() {
94+
console.log(await slides.getActiveIndex());
95+
};
96+
97+
async function getPreviousIndex() {
98+
console.log(await slides.getPreviousIndex());
99+
};
100+
101+
async function isEnd() {
102+
console.log(await slides.isEnd());
103+
}
104+
105+
async function isBeginning() {
106+
console.log(await slides.isBeginning());
107+
}
108+
slides.addEventListener('ionSlideDidChange', function (e) {
109+
console.log('slide did change', e)
110+
});
111+
slides.addEventListener('ionSlideWillChange', function (e) {
112+
console.log('slide will change', e)
113+
});
114+
slides.addEventListener('ionSlideNextStart', function (e) {
115+
console.log('slide next start', e)
116+
});
117+
slides.addEventListener('ionSlidePrevStart', function (e) {
118+
console.log('slide prev start', e)
119+
});
120+
slides.addEventListener('ionSlideNextEnd', function (e) {
121+
console.log('slide next end', e)
122+
});
123+
slides.addEventListener('ionSlidePrevEnd', function (e) {
124+
console.log('slide prev end', e)
125+
});
126+
slides.addEventListener('ionSlideTransitionStart', function (e) {
127+
console.log('slide transition start', e)
128+
});
129+
slides.addEventListener('ionSlideTransitionEnd', function (e) {
130+
console.log('slide transistion end', e)
131+
});
132+
slides.addEventListener('ionSlideDrag', function (e) {
133+
console.log('slide drag', e)
134+
});
135+
slides.addEventListener('ionSlideReachStart', function (e) {
136+
console.log('slide reach start', e)
137+
});
138+
slides.addEventListener('ionSlideReachEnd', function (e) {
139+
console.log('slide reach end', e)
140+
});
141+
slides.addEventListener('ionSlideTouchStart', function (e) {
142+
console.log('slide touch start', e)
143+
});
144+
slides.addEventListener('ionSlideTouchEnd', function (e) {
145+
console.log('slide touch end', e)
146+
});
147+
slides.addEventListener('ionSlidesDidLoad', function (e) {
148+
console.log('slides did load', e)
149+
});
150+
slides.addEventListener('ionSlideTap', function (e) {
151+
console.log('slide tapped', e)
152+
});
153+
slides.addEventListener('ionSlideDoubleTap', function (e) {
154+
console.log('slide double-tapped', e)
155+
});
156+
</script>
157+
</body>
158+
159+
</html>

0 commit comments

Comments
 (0)