1 | .swiper-container {
|
2 | --bullet-background: var(--ion-color-step-200, #cccccc);
|
3 | --bullet-background-active: var(--ion-color-primary, #3880ff);
|
4 | --progress-bar-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
|
5 | --progress-bar-background-active: var(--ion-color-primary-shade, #3171e0);
|
6 | --scroll-bar-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
|
7 | --scroll-bar-background-active: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
|
8 | |
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | display: block;
|
19 | user-select: none;
|
20 | }
|
21 |
|
22 | .swiper-pagination-bullet {
|
23 | background: var(--bullet-background);
|
24 | }
|
25 |
|
26 | .swiper-pagination-bullet-active {
|
27 | background: var(--bullet-background-active);
|
28 | }
|
29 |
|
30 | .swiper-pagination-progressbar {
|
31 | background: var(--progress-bar-background);
|
32 | }
|
33 |
|
34 | .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
35 | background: var(--progress-bar-background-active);
|
36 | }
|
37 |
|
38 | .swiper-scrollbar {
|
39 | background: var(--scroll-bar-background);
|
40 | }
|
41 |
|
42 | .swiper-scrollbar-drag {
|
43 | background: var(--scroll-bar-background-active);
|
44 | }
|
45 |
|
46 | ion-slide {
|
47 | display: block;
|
48 | width: 100%;
|
49 | height: 100%;
|
50 | }
|
51 |
|
52 | .slide-zoom {
|
53 | display: block;
|
54 | width: 100%;
|
55 | text-align: center;
|
56 | }
|
57 |
|
58 | .swiper-slide {
|
59 | display: flex;
|
60 | position: relative;
|
61 | flex-shrink: 0;
|
62 | align-items: center;
|
63 | justify-content: center;
|
64 | width: 100%;
|
65 | height: 100%;
|
66 | font-size: 18px;
|
67 | text-align: center;
|
68 | box-sizing: border-box;
|
69 | }
|
70 |
|
71 | .swiper-slide img {
|
72 | width: auto;
|
73 | max-width: 100%;
|
74 | height: auto;
|
75 | max-height: 100%;
|
76 | }
|
77 |
|
78 |
|