
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
nativescript-slides
Advanced tools
videos by Brad Martin
<Slides:SlideContainer id="slides" pageIndicators="true">
<Slides:Slide class="slide-1">
<Label text="This is Panel 1" />
</Slides:Slide>
<Slides:Slide class="slide-2">
<Label text="This is Panel 2" />
</Slides:Slide>
<Slides:Slide class="slide-3">
<Label text="This is Panel 3" />
</Slides:Slide>
<Slides:Slide class="slide-4">
<Label text="This is Panel 4" />
</Slides:Slide>
<Slides:Slide class="slide-5">
<Label text="This is Panel 5" />
</Slides:Slide>
</Slides:SlideContainer>
.slide-1 {
background-color: darkslateblue;
}
.slide-2 {
background-color: darkcyan;
}
.slide-3 {
background-color: darkgreen;
}
.slide-4 {
background-color: darkgoldenrod;
}
.slide-5 {
background-color: darkslategray;
}
label {
text-align: center;
width: 100%;
font-size: 35;
margin-top: 35;
}
Great for Intros/Tutorials to Image Carousels.
To use the intro slide plugin you need to first import it into your xml layout with xmlns:Slides="nativescript-slides"
when using the intro slide plugin you need at least two <Slides:Slide>
views inside of the <Slides:SlideContainer>
.
add as many <Slides:Slide>
as you want.
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.
disablePan : boolean - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.
pagerOffset : string - Margin-top for the pager. Number or percentage, default 88%.
pageIndicators : boolean - If true adds indicator dots to the bottom of your slides.
**slideWidth: number - set the width of your slides. (Only currently works on android).
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.
.slide-indicator-inactive {
background-color: #fff;
opacity: 0.4;
width: 10;
height: 10;
margin-left: 2.5;
margin-right: 2.5;
margin-top: 0;
border-radius: 5;
}
.slide-indicator-active {
background-color: #fff;
opacity: 0.9;
width: 10;
height: 10;
margin-left: 2.5;
margin-right: 2.5;
margin-top: 0;
border-radius: 5;
}
I've started working on a Angular 2 version they can be checked out here: Angular 2 version of slides
If you want to use this plugin with Angular 2 the registerElement
from nativescript-angular
you will want to set the SlideContainer
's property of angular
to true
. Then in your angular component in the ngAfterViewInit
. you will want to have an instance of your slide container to call the function constructView()
.
Follow the example
npm run setup
to prepare the demo projectnpm run build
npm run demo.android
or npm run demo.ios
You want to hook into the loaded event of the view and then create your view elements.
<Slides:SlideContainer loaded="onSlideContainerLoaded"
import * as slides from 'nativescript-slides/nativescript-slides';
export function onSlideContainerLoaded(args) {
let slideContainer = <slides.SlideContainer>args.object;
//Construct the slides
slideContainer.addChild(getSlide('Page 1', 'slide-1'));
slideContainer.addChild(getSlide('Page 2', 'slide-2'));
slideContainer.addChild(getSlide('Page 3', 'slide-3'));
slideContainer.addChild(getSlide('Page 4', 'slide-4'));
slideContainer.addChild(getSlide('Page 5', 'slide-5'));
}
function getSlide(labelText: string, className: string) {
let slide = new slides.Slide();
slide.className = className;
let label = new labelModule.Label();
label.text = labelText;
slide.addChild(label);
return slide;
}
And thanks to Nathan Walker for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here: https://github.com/NathanWalker/nativescript-plugin-seed
for {N} version 2.0.0+
FAQs
NativeScript Slides plugin.
The npm package nativescript-slides receives a total of 24 weekly downloads. As such, nativescript-slides popularity was classified as not popular.
We found that nativescript-slides demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.