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
Copy file name to clipboardExpand all lines: README.md
+26-26Lines changed: 26 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,47 +1,48 @@
1
-
# NativeScript Slides for iOS and Android
2
-
###_The plugin formally known as nativescript-intro-slides_
3
-
[](https://www.youtube.com/embed/1AatGtPA6J8)
1
+
# Nativescript Intro Slides for iOS and Android
2
+
###_Not just for intro slides any more! Great for **Image Carousels** too!_ ###
3
+
4
+
[](https://www.youtube.com/embed/1AatGtPA6J8)
4
5
5
6
##Example Usage:
6
7
###XML
7
8
```xml
8
9
9
-
<Slides:SlideContainer>
10
-
<Slides:Slideclass="slide-1">
10
+
<IntroSlides:IntroSlides>
11
+
<IntroSlides:Slideclass="intro-slide-1">
11
12
<Labeltext="This is Panel 1" />
12
-
</Slides:Slide>
13
-
<Slides:Slideclass="slide-2">
13
+
</IntroSlides:Slide>
14
+
<IntroSlides:Slideclass="intro-slide-2">
14
15
<Labeltext="This is Panel 2" />
15
-
</Slides:Slide>
16
-
<Slides:Slideclass="slide-3">
16
+
</IntroSlides:Slide>
17
+
<IntroSlides:Slideclass="intro-slide-3">
17
18
<Labeltext="This is Panel 3" />
18
-
</Slides:Slide>
19
-
<Slides:Slideclass="slide-4">
19
+
</IntroSlides:Slide>
20
+
<IntroSlides:Slideclass="intro-slide-4">
20
21
<Labeltext="This is Panel 4" />
21
-
</Slides:Slide>
22
-
<Slides:Slideclass="slide-5">
22
+
</IntroSlides:Slide>
23
+
<IntroSlides:Slideclass="intro-slide-5">
23
24
<Labeltext="This is Panel 5" />
24
-
</Slides:Slide>
25
-
</Slides:SlideContainer>
25
+
</IntroSlides:Slide>
26
+
</IntroSlides:IntroSlides>
26
27
27
28
```
28
29
###CSS
29
30
```css
30
-
.slide-1{
31
+
.intro-slide-1{
31
32
background-color: darkslateblue;
32
33
}
33
34
34
-
.slide-2{
35
+
.intro-slide-2{
35
36
background-color: darkcyan;
36
37
}
37
-
.slide-3{
38
+
.intro-slide-3{
38
39
background-color: darkgreen;
39
40
}
40
41
41
-
.slide-4{
42
+
.intro-slide-4{
42
43
background-color: darkgoldenrod;
43
44
}
44
-
.slide-5{
45
+
.intro-slide-5{
45
46
background-color: darkslategray;
46
47
}
47
48
Label{
@@ -52,17 +53,16 @@ Label{
52
53
}
53
54
54
55
```
55
-
Great for Intros/Tutorials to Image Carousels.
56
56
57
-
To use the intro slide plugin you need to first import it into your xml layout with `xmlns:Slides="nativescript-slides"`
57
+
To use the intro slide plugin you need to first import it into your xml layout with `xmlns:IntroSlides="nativescript-intro-slides"`
58
58
59
-
when using the intro slide plugin you need at least two ``<Slides:Slide>`` views inside of the ``<Slides:SlideContainer>``.
59
+
when using the intro slide plugin you need at least two ``<IntroSlides:Slide>`` views inside of the ``<IntroSlides:IntroSlides>``.
60
60
61
-
add as many ``<Slides:Slide>`` as you want.
61
+
add as many ``<IntroSlides:Slide>`` as you want.
62
62
63
-
the `SlideContainer` class also has public `nextSlide` and `previousSlide` functions so you can add your own previous and next buttons as needed.
63
+
the `IntroSlides` class also has public `nextSlide` and `previousSlide` functions so you can add your own previous and next buttons as needed.
64
64
65
-
the `<Slides:SlideContainer>` element also has a property called `loop` which is a boolean value and if set to 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.
65
+
the `<IntroSlides:IntroSlides>` element also has a property called `loop` which is a boolean value and if set to 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.
66
66
67
67
the `<IntroSlides:IntroSlides>` element also has a property called `interval` which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call page.getViewById("your_id").carousel(false,0) to unregister it (your_id is the id given to `<IntroSlides:IntroSlides>`).
0 commit comments