You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
place this in the app.css file in the root of your project.
65
+
place this in the app.css file in the root of your project.
66
66
67
67
```css
68
-
.slide-1{
68
+
.slide-1{
69
69
background-color: darkslateblue;
70
70
}
71
71
72
-
.slide-2{
72
+
.slide-2{
73
73
background-color: darkcyan;
74
74
}
75
-
.slide-3{
75
+
.slide-3{
76
76
background-color: darkgreen;
77
77
}
78
78
79
-
.slide-4{
79
+
.slide-4{
80
80
background-color: darkgoldenrod;
81
81
}
82
-
.slide-5{
82
+
.slide-5{
83
83
background-color: darkslategray;
84
84
}
85
-
Label{
85
+
label{
86
86
text-align: center;
87
87
width: 100%;
88
88
font-size: 35;
89
89
margin-top: 35;
90
-
color: #fff;
91
-
90
+
color: #fff;
92
91
}
93
-
94
92
```
93
+
95
94
Great for Intros/Tutorials to Image Carousels.
96
95
97
96
This very much a work in progress. Please feel free to contribute.
98
97
99
98
### Attributes for SlideContainer
100
99
101
-
-**loop : boolean** - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.
100
+
-**loop : boolean** - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.
102
101
103
102
-**pageIndicators : boolean** - If true adds indicator dots to the bottom of your slides.
104
103
@@ -107,53 +106,52 @@ This very much a work in progress. Please feel free to contribute.
107
106
If the property `pageIndicators` is `true` you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.
108
107
109
108
```css
110
-
.slide-indicator-inactive{
111
-
background-color: #fff;
112
-
opacity: 0.4;
113
-
width: 10;
114
-
height: 10;
115
-
margin-left: 2.5;
116
-
margin-right: 2.5;
117
-
margin-top: 0;
118
-
border-radius: 5;
109
+
.slide-indicator-inactive{
110
+
background-color: #fff;
111
+
opacity: 0.4;
112
+
width: 10;
113
+
height: 10;
114
+
margin-left: 2.5;
115
+
margin-right: 2.5;
116
+
margin-top: 0;
117
+
border-radius: 5;
119
118
}
120
119
121
-
.slide-indicator-active{
122
-
background-color: #fff;
123
-
opacity: 0.9;
124
-
width: 10;
125
-
height: 10;
126
-
margin-left: 2.5;
127
-
margin-right: 2.5;
128
-
margin-top: 0;
129
-
border-radius: 5;
120
+
.slide-indicator-active{
121
+
background-color: #fff;
122
+
opacity: 0.9;
123
+
width: 10;
124
+
height: 10;
125
+
margin-left: 2.5;
126
+
margin-right: 2.5;
127
+
margin-top: 0;
128
+
border-radius: 5;
130
129
}
131
130
```
132
131
133
132
#### Plugin Development Work Flow:
134
133
135
-
* Clone repository to your machine.
136
-
* Run `npm run setup` to prepare the demo project
137
-
* Build with `npm run build`
138
-
* Run and deploy to your device or emulator with `npm run demo.android` or `npm run demo.ios`
134
+
- Clone repository to your machine.
135
+
- Run `npm install` to prepare the project
136
+
- Run and deploy to your device or emulator with `npm run android` or `npm run ios`
137
+
- Build a ngPackagr version with `npm run build`
139
138
140
139
#### Known issues
141
140
142
-
* Does not work well inside of ScrollView or TabViews.
141
+
- Does not work well inside of ScrollView or TabViews.
0 commit comments