# 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:

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

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.

### 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();