WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - JavaScript Slide Box


A Slide box contains pages which is able to be changed by swiping the content screen.

Using Slide Box

The usage of the slide box is easy. you merely have to be compelled to add ion-slide-box as a instrumentation and ion-slide with box class inside that instrumentation. we have a tendency to ar reaching to add height and border to our boxes for higher 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;
}