WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - JavaScript Slide Box


A Slide box contains pages that can be changed by swiping the content screen.

Using Slide Box

The usage of the slide box is simple. You just need to add ion-slide-box as a container and ion-slide with box class inside that container. We will add height and border to our boxes for better visibility.

HTML Code

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}