Skip to content

Commit b9afba6

Browse files
nolimits4webnolimits4web
committed
feat: update to latest Swiper
1 parent 0dc65f6 commit b9afba6

File tree

17 files changed

+478
-498
lines changed

17 files changed

+478
-498
lines changed

‎kitchen-sink/core/css/app.css‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -228,10 +228,10 @@
228228
width: 100%;
229229
height: 100%;
230230
}
231-
.demo-swiper .swiper-slide,
232231
.demo-swiper swiper-slide,
233-
.demo-swiper-multiple .swiper-slide,
234-
.demo-swiper-multiple swiper-slide {
232+
.demo-swiper-multiple swiper-slide,
233+
.demo-swiper::part(slide),
234+
.demo-swiper-multiple::part(slide) {
235235
font-size: 25px;
236236
font-weight: 300;
237237
display: -webkit-box;
@@ -249,7 +249,6 @@
249249
background: #fff;
250250
color: #000;
251251
}
252-
.demo-swiper-multiple .swiper-slide,
253252
.demo-swiper-multiple swiper-slide {
254253
box-sizing: border-box;
255254
border: 1px solid #ccc;
@@ -260,15 +259,12 @@
260259
font-size: 18px;
261260
height: 120px;
262261
}
263-
.demo-swiper-multiple.demo-swiper-multiple-auto .swiper-slide,
264262
.demo-swiper-multiple.demo-swiper-multiple-auto swiper-slide {
265263
width: 85%;
266264
}
267-
.demo-swiper-multiple.demo-swiper-multiple-auto .swiper-slide:nth-child(2n),
268265
.demo-swiper-multiple.demo-swiper-multiple-auto swiper-slide:nth-child(2n) {
269266
width: 70%;
270267
}
271-
.demo-swiper-multiple.demo-swiper-multiple-auto .swiper-slide:nth-child(3n),
272268
.demo-swiper-multiple.demo-swiper-multiple-auto swiper-slide:nth-child(3n) {
273269
width: 30%;
274270
}
@@ -280,7 +276,6 @@
280276
background: #000;
281277
height: 100%;
282278
}
283-
.demo-swiper-custom .swiper-slide,
284279
.demo-swiper-custom swiper-slide {
285280
background-size: cover;
286281
background-position: center;
@@ -308,23 +303,39 @@
308303
height: 70%;
309304
top: 15%;
310305
}
306+
.demo-swiper-slide-content {
307+
position: relative;
308+
width: 100%;
309+
height: 100%;
310+
display: flex;
311+
align-items: center;
312+
justify-content: center;
313+
}
314+
.demo-swiper-slide-content span {
315+
position: relative;
316+
z-index: 1;
317+
}
318+
.demo-swiper-slide-content img {
319+
position: absolute;
320+
width: 100%;
321+
height: 100%;
322+
left: 0;
323+
top: 0;
324+
object-fit: cover;
325+
}
311326
.demo-swiper-coverflow {
312327
height: 60%;
313328
top: 20%;
314329
}
315-
.demo-swiper-coverflow .swiper-slide,
316-
.demo-swiper-coverflow swiper-slide {
330+
.demo-swiper-coverflow::part(slide) {
317331
width: 65%;
318332
}
319-
.demo-swiper-cube .swiper-slide,
320-
.demo-swiper-cube swiper-slide,
321-
.demo-swiper-coverflow .swiper-slide,
322-
.demo-swiper-coverflow swiper-slide {
333+
.demo-swiper-cube::part(slide),
334+
.demo-swiper-coverflow::part(slide) {
323335
background-size: cover;
324336
color: #fff;
325337
-webkit-backface-visibility: hidden;
326338
}
327-
.demo-swiper-fade .swiper-slide,
328339
.demo-swiper-fade swiper-slide {
329340
background-size: cover;
330341
background-position: center;
@@ -353,7 +364,6 @@
353364
.demo-swiper-gallery-thumbs .swiper-slide-thumb-active .swiper-slide-pic {
354365
opacity: 1;
355366
}
356-
.demo-swiper-gallery-top .swiper-slide,
357367
.demo-swiper-gallery-top swiper-slide,
358368
.demo-swiper-gallery-thumbs .swiper-slide-pic {
359369
background-size: cover;
@@ -372,7 +382,6 @@
372382
background-size: cover;
373383
background-position: center;
374384
}
375-
.demo-swiper-parallax .swiper-slide,
376385
.demo-swiper-parallax swiper-slide {
377386
-webkit-box-sizing: border-box;
378387
box-sizing: border-box;
@@ -394,11 +403,9 @@
394403
.demo-swiper-lazy {
395404
height: 100%;
396405
}
397-
.demo-swiper-lazy .swiper-slide,
398406
.demo-swiper-lazy swiper-slide {
399407
position: relative;
400408
}
401-
.demo-swiper-lazy .swiper-slide img,
402409
.demo-swiper-lazy swiper-slide img {
403410
width: auto;
404411
height: auto;

‎kitchen-sink/core/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<meta name="theme-color" content="#fff">
1111
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
1212
<title>Framework7</title>
13-
<link rel="stylesheet" href="../../packages/core/framework7-bundle.min.css">
13+
<link rel="stylesheet" href="../../build/core/framework7-bundle.css">
1414
<link rel="stylesheet" href="css/app.css">
1515
<link rel="apple-touch-icon" href="img/f7-icon-square.png">
1616
<link rel="icon" href="img/f7-icon.png">
@@ -104,7 +104,7 @@
104104
</div>
105105
<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="768" data-url="/"></div>
106106
</div>
107-
<script src="../../packages/core/framework7-bundle.min.js"></script>
107+
<script src="../../build/core/framework7-bundle.js"></script>
108108
<script src="js/routes.js"></script>
109109
<script src="js/store.js"></script>
110110
<script src="js/app.js"></script>

‎kitchen-sink/core/pages/swiper-3d-coverflow.html‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,42 @@
1414
<div class="page-content">
1515
<swiper-container effect="coverflow" pagination slides-per-view="auto" centered-slides
1616
class="demo-swiper demo-swiper-coverflow">
17-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-1.jpg)">Slide
18-
1</swiper-slide>
19-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-2.jpg)">Slide
20-
2</swiper-slide>
21-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-3.jpg)">Slide
22-
3</swiper-slide>
23-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-4.jpg)">Slide
24-
4</swiper-slide>
25-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-5.jpg)">Slide
26-
5</swiper-slide>
27-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-6.jpg)">Slide
28-
6</swiper-slide>
29-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-7.jpg)">Slide
30-
7</swiper-slide>
31-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-8.jpg)">Slide
32-
8</swiper-slide>
33-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/nature-800x800-9.jpg)">Slide
34-
9</swiper-slide>
17+
<div slot="slide-0" class="demo-swiper-slide-content">
18+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-1.jpg" />
19+
<span>Slide 1</span>
20+
</div>
21+
<div slot="slide-1" class="demo-swiper-slide-content">
22+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-2.jpg" />
23+
<span>Slide 2</span>
24+
</div>
25+
<div slot="slide-2" class="demo-swiper-slide-content">
26+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-3.jpg" />
27+
<span>Slide 3</span>
28+
</div>
29+
<div slot="slide-3" class="demo-swiper-slide-content">
30+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-4.jpg" />
31+
<span>Slide 4</span>
32+
</div>
33+
<div slot="slide-4" class="demo-swiper-slide-content">
34+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-5.jpg" />
35+
<span>Slide 5</span>
36+
</div>
37+
<div slot="slide-5" class="demo-swiper-slide-content">
38+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-6.jpg" />
39+
<span>Slide 6</span>
40+
</div>
41+
<div slot="slide-6" class="demo-swiper-slide-content">
42+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-7.jpg" />
43+
<span>Slide 7</span>
44+
</div>
45+
<div slot="slide-7" class="demo-swiper-slide-content">
46+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-8.jpg" />
47+
<span>Slide 8</span>
48+
</div>
49+
<div slot="slide-8" class="demo-swiper-slide-content">
50+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-9.jpg" />
51+
<span>Slide 9</span>
52+
</div>
3553
</swiper-container>
3654

3755
</div>

‎kitchen-sink/core/pages/swiper-3d-cube.html‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,42 @@
1313
</div>
1414
<div class="page-content">
1515
<swiper-container effect="cube" class="demo-swiper demo-swiper-cube">
16-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-1.jpg)">Slide
17-
1</swiper-slide>
18-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-2.jpg)">Slide
19-
2</swiper-slide>
20-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-3.jpg)">Slide
21-
3</swiper-slide>
22-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-4.jpg)">Slide
23-
4</swiper-slide>
24-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-5.jpg)">Slide
25-
5</swiper-slide>
26-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-6.jpg)">Slide
27-
6</swiper-slide>
28-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-7.jpg)">Slide
29-
7</swiper-slide>
30-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-8.jpg)">Slide
31-
8</swiper-slide>
32-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-9.jpg)">Slide
33-
9</swiper-slide>
16+
<div slot="slide-0" class="demo-swiper-slide-content">
17+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-1.jpg" />
18+
<span>Slide 1</span>
19+
</div>
20+
<div slot="slide-1" class="demo-swiper-slide-content">
21+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-2.jpg" />
22+
<span>Slide 2</span>
23+
</div>
24+
<div slot="slide-2" class="demo-swiper-slide-content">
25+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-3.jpg" />
26+
<span>Slide 3</span>
27+
</div>
28+
<div slot="slide-3" class="demo-swiper-slide-content">
29+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-4.jpg" />
30+
<span>Slide 4</span>
31+
</div>
32+
<div slot="slide-4" class="demo-swiper-slide-content">
33+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-5.jpg" />
34+
<span>Slide 5</span>
35+
</div>
36+
<div slot="slide-5" class="demo-swiper-slide-content">
37+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-6.jpg" />
38+
<span>Slide 6</span>
39+
</div>
40+
<div slot="slide-6" class="demo-swiper-slide-content">
41+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-7.jpg" />
42+
<span>Slide 7</span>
43+
</div>
44+
<div slot="slide-7" class="demo-swiper-slide-content">
45+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-8.jpg" />
46+
<span>Slide 8</span>
47+
</div>
48+
<div slot="slide-8" class="demo-swiper-slide-content">
49+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-9.jpg" />
50+
<span>Slide 9</span>
51+
</div>
3452
</swiper-container>
3553
</div>
3654
</div>

‎kitchen-sink/core/pages/swiper-3d-flip.html‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,42 @@
1414
<div class="page-content">
1515
<swiper-container effect="flip" pagination slides-per-view="auto" centered-slides
1616
class="demo-swiper demo-swiper-cube">
17-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-1.jpg)">Slide
18-
1</swiper-slide>
19-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-2.jpg)">Slide
20-
2</swiper-slide>
21-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-3.jpg)">Slide
22-
3</swiper-slide>
23-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-4.jpg)">Slide
24-
4</swiper-slide>
25-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-5.jpg)">Slide
26-
5</swiper-slide>
27-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-6.jpg)">Slide
28-
6</swiper-slide>
29-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-7.jpg)">Slide
30-
7</swiper-slide>
31-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-8.jpg)">Slide
32-
8</swiper-slide>
33-
<swiper-slide style="background-image:url(https://cdn.framework7.io/placeholder/people-800x800-9.jpg)">Slide
34-
9</swiper-slide>
17+
<div slot="slide-0" class="demo-swiper-slide-content">
18+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-1.jpg" />
19+
<span>Slide 1</span>
20+
</div>
21+
<div slot="slide-1" class="demo-swiper-slide-content">
22+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-2.jpg" />
23+
<span>Slide 2</span>
24+
</div>
25+
<div slot="slide-2" class="demo-swiper-slide-content">
26+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-3.jpg" />
27+
<span>Slide 3</span>
28+
</div>
29+
<div slot="slide-3" class="demo-swiper-slide-content">
30+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-4.jpg" />
31+
<span>Slide 4</span>
32+
</div>
33+
<div slot="slide-4" class="demo-swiper-slide-content">
34+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-5.jpg" />
35+
<span>Slide 5</span>
36+
</div>
37+
<div slot="slide-5" class="demo-swiper-slide-content">
38+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-6.jpg" />
39+
<span>Slide 6</span>
40+
</div>
41+
<div slot="slide-6" class="demo-swiper-slide-content">
42+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-7.jpg" />
43+
<span>Slide 7</span>
44+
</div>
45+
<div slot="slide-7" class="demo-swiper-slide-content">
46+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-8.jpg" />
47+
<span>Slide 8</span>
48+
</div>
49+
<div slot="slide-8" class="demo-swiper-slide-content">
50+
<img src="https://cdn.framework7.io/placeholder/nature-800x800-9.jpg" />
51+
<span>Slide 9</span>
52+
</div>
3553
</swiper-container>
3654

3755
</div>

0 commit comments

Comments
 (0)