Skip to content

Commit e0ecebb

Browse files
nolimits4webnolimits4web
committed
feat: demos to v14
1 parent 7f67722 commit e0ecebb

101 files changed

Lines changed: 9983 additions & 9075 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/HomeElementUsage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const HomeElementUsage = () => {
1010
<span className="token attr-value">
1111
<span className="token punctuation attr-equals">=</span>
1212
<span className="token punctuation">"</span>
13-
https://cdn.jsdelivr.net/npm/swiper@12/swiper-element-bundle.min.js
13+
https://cdn.jsdelivr.net/npm/swiper@14/swiper-element-bundle.min.js
1414
<span className="token punctuation">"</span>
1515
</span>
1616
<span className="token punctuation">&gt;</span>

‎src/demos/010-default/core/index.html‎

Lines changed: 74 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,84 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Swiper demo</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
9+
/>
10+
<!-- Link Swiper's CSS -->
11+
<link
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css"
14+
/>
315

4-
<head>
5-
<meta charset="utf-8" />
6-
<title>Swiper demo</title>
7-
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
8-
<!-- Link Swiper's CSS -->
9-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
16+
<!-- Demo styles -->
17+
<style>
18+
html,
19+
body {
20+
position: relative;
21+
height: 100%;
22+
}
1023

11-
<!-- Demo styles -->
12-
<style>
13-
html,
14-
body {
15-
position: relative;
16-
height: 100%;
17-
}
24+
body {
25+
background: #000;
26+
font-family:
27+
Helvetica Neue,
28+
Helvetica,
29+
Arial,
30+
sans-serif;
31+
font-size: 14px;
32+
color: #fff;
33+
margin: 0;
34+
padding: 0;
35+
}
1836

19-
body {
20-
background: #000;
21-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
22-
font-size: 14px;
23-
color: #fff;
24-
margin: 0;
25-
padding: 0;
26-
}
37+
.swiper {
38+
width: 100%;
39+
height: 100%;
40+
}
2741

28-
.swiper {
29-
width: 100%;
30-
height: 100%;
31-
}
42+
.swiper-slide {
43+
text-align: center;
44+
font-size: 18px;
45+
background: #444;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
}
3250

33-
.swiper-slide {
34-
text-align: center;
35-
font-size: 18px;
36-
background: #444;
37-
display: flex;
38-
justify-content: center;
39-
align-items: center;
40-
}
51+
.swiper-slide img {
52+
display: block;
53+
width: 100%;
54+
height: 100%;
55+
object-fit: cover;
56+
}
57+
</style>
58+
</head>
4159

42-
.swiper-slide img {
43-
display: block;
44-
width: 100%;
45-
height: 100%;
46-
object-fit: cover;
47-
}
48-
</style>
49-
</head>
50-
51-
<body>
52-
<!-- Swiper -->
53-
<div class="swiper mySwiper">
54-
<div class="swiper-wrapper">
55-
<div class="swiper-slide">Slide 1</div>
56-
<div class="swiper-slide">Slide 2</div>
57-
<div class="swiper-slide">Slide 3</div>
58-
<div class="swiper-slide">Slide 4</div>
59-
<div class="swiper-slide">Slide 5</div>
60-
<div class="swiper-slide">Slide 6</div>
61-
<div class="swiper-slide">Slide 7</div>
62-
<div class="swiper-slide">Slide 8</div>
63-
<div class="swiper-slide">Slide 9</div>
60+
<body>
61+
<!-- Swiper -->
62+
<div class="swiper mySwiper">
63+
<div class="swiper-wrapper">
64+
<div class="swiper-slide">Slide 1</div>
65+
<div class="swiper-slide">Slide 2</div>
66+
<div class="swiper-slide">Slide 3</div>
67+
<div class="swiper-slide">Slide 4</div>
68+
<div class="swiper-slide">Slide 5</div>
69+
<div class="swiper-slide">Slide 6</div>
70+
<div class="swiper-slide">Slide 7</div>
71+
<div class="swiper-slide">Slide 8</div>
72+
<div class="swiper-slide">Slide 9</div>
73+
</div>
6474
</div>
65-
</div>
66-
67-
<!-- Swiper JS -->
68-
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
6975

70-
<!-- Initialize Swiper -->
71-
<script>
72-
var swiper = new Swiper(".mySwiper", {});
73-
</script>
74-
</body>
76+
<!-- Swiper JS -->
77+
<script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js"></script>
7578

76-
</html>
79+
<!-- Initialize Swiper -->
80+
<script>
81+
var swiper = new Swiper('.mySwiper', {});
82+
</script>
83+
</body>
84+
</html>

‎src/demos/010-default/element/index.html‎

Lines changed: 61 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,69 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Swiper demo</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
9+
/>
310

4-
<head>
5-
<meta charset="utf-8" />
6-
<title>Swiper demo</title>
7-
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
11+
<style>
12+
html,
13+
body {
14+
position: relative;
15+
height: 100%;
16+
}
817

9-
<style>
10-
html,
11-
body {
12-
position: relative;
13-
height: 100%;
14-
}
18+
body {
19+
background: #000;
20+
font-family:
21+
Helvetica Neue,
22+
Helvetica,
23+
Arial,
24+
sans-serif;
25+
font-size: 14px;
26+
color: #fff;
27+
margin: 0;
28+
padding: 0;
29+
}
1530

16-
body {
17-
background: #000;
18-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
19-
font-size: 14px;
20-
color: #fff;
21-
margin: 0;
22-
padding: 0;
23-
}
31+
swiper-container {
32+
width: 100%;
33+
height: 100%;
34+
}
2435

25-
swiper-container {
26-
width: 100%;
27-
height: 100%;
28-
}
36+
swiper-slide {
37+
text-align: center;
38+
font-size: 18px;
39+
background: #444;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
}
2944

30-
swiper-slide {
31-
text-align: center;
32-
font-size: 18px;
33-
background: #444;
34-
display: flex;
35-
justify-content: center;
36-
align-items: center;
37-
}
45+
swiper-slide img {
46+
display: block;
47+
width: 100%;
48+
height: 100%;
49+
object-fit: cover;
50+
}
51+
</style>
52+
</head>
3853

39-
swiper-slide img {
40-
display: block;
41-
width: 100%;
42-
height: 100%;
43-
object-fit: cover;
44-
}
45-
</style>
46-
</head>
54+
<body>
55+
<swiper-container class="mySwiper">
56+
<swiper-slide>Slide 1</swiper-slide>
57+
<swiper-slide>Slide 2</swiper-slide>
58+
<swiper-slide>Slide 3</swiper-slide>
59+
<swiper-slide>Slide 4</swiper-slide>
60+
<swiper-slide>Slide 5</swiper-slide>
61+
<swiper-slide>Slide 6</swiper-slide>
62+
<swiper-slide>Slide 7</swiper-slide>
63+
<swiper-slide>Slide 8</swiper-slide>
64+
<swiper-slide>Slide 9</swiper-slide>
65+
</swiper-container>
4766

48-
<body>
49-
50-
<swiper-container class="mySwiper">
51-
52-
<swiper-slide>Slide 1</swiper-slide>
53-
<swiper-slide>Slide 2</swiper-slide>
54-
<swiper-slide>Slide 3</swiper-slide>
55-
<swiper-slide>Slide 4</swiper-slide>
56-
<swiper-slide>Slide 5</swiper-slide>
57-
<swiper-slide>Slide 6</swiper-slide>
58-
<swiper-slide>Slide 7</swiper-slide>
59-
<swiper-slide>Slide 8</swiper-slide>
60-
<swiper-slide>Slide 9</swiper-slide>
61-
</swiper-container>
62-
63-
64-
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-element-bundle.min.js"></script>
65-
66-
</body>
67-
68-
</html>
67+
<script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-element-bundle.min.js"></script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)