Ionic JavaScript Slide Box - Ionic

What is JavaScript Slide Box in Ionic Framework?

By the swipe of the content screen, the pages which can be changed are present in the Slide box.

How to use Slide Box in Ionic Framework?

To use the slide box, ion-slide-box is added as container and ion-slide with the box class is added inside the container. For better visibility of the boxes, height and border are added to the boxes.

HTML Code

The output appears as:

Slide Box 1

The box can be changed by dragging the content to right and by dragging to left, previous box can be shown.

Slide Box 2

By using different attributes slide box behaviour can be controlled. They are:

Attribute
Type
Details
does-continue
boolean
Should slide box loop when first or last box is reached.
auto-play
boolean
Should slide box automatically slide.
slide-interval
number
Time value between auto slide change in milliseconds. Default value is 4000.
show-pager
boolean
Should pager be visible.
pager-click
expression
Called when a pager is tapped (if pager is visible).$indexis used to match with different slides.
on-slide-changed
expression
Called when slide is changed.$indexis used to match with different slides.
active-slide
expression
Used as a model to bind the current slide index to.
delegate-handle
string
Used for slide box identification with$ionicSlideBoxDelegate.

How to use Slide Box Delegate in Ionic Framework?

The service used for controlling all the slide boxes is $ionicSlideBoxDelegate. This is injected in the controller.

Controller Code

HTML Code

The different slide Box Delegates provided by Ionic Framework are:

Method

Parameters

Type

Details

slide(parameter1, parameter2)

to, speed

number, number

Parametertorepresents index to slide to.speeddetermines how fast is the change in milliseconds.

enableSlide(parameter1)

shouldEnable

boolean

Used for enambling or disabling sliding.

previous(parameter1)

speed

number

The value in miliseconds the change should take.

stop()

/

/

Used to stop the sliding.

start()

/

/

Used to start the sliding.

currentIndex()

/

number

Returns index of the curent slide.

slidesCount()

/

number

Returns total number of the slides.

$getByHandle(parameter1)

handle

string

Used to connect methods to the particular slide box with the same handle.

$ionicSlideBoxDelegate.$getByHandle ('my-handle').start();

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ionic Topics