IONIC V3 | IMAGE SLIDER IN IONIC WITH EXAMPLE

Share the post

IMAGE SLIDER IN IONIC

If you have seen today’s eCommerce site then you must have seen some images are slides horizontally after a certain period of time or if you slide it on left then a different image will appear on the screen. This is nothing but a Slider. Sliders are the most important thing while you designing any new application. You can able to control the slider by applying different attributes. You can autoplay the slider or can give the time limit for it. Also, We can control the direction of the slider. To implement the image slider in ionic you just have to copy & paste the below code in your HTML.

Please see below code for more details:

<ion-header>
  <ion-navbar>
    <ion-title>Slider Example</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
 <ion-slides pager>


  <ion-slide style="background-color: brown">
    <h2>Slide 1</h2>
  </ion-slide>


  <ion-slide style="background-color: yellow">
    <h2>Slide 2</h2>
  </ion-slide>


  <ion-slide style="background-color: orange">
    <h2>Slide 3</h2>
  </ion-slide>


</ion-slides>
</ion-content>

The output for above code as shown below :

output
Output

We can able to control the slider by using the JS also. You can place the different image which available at the server by calling the API. We can able to display any images without touching our front end as we are getting these images using API. So, this is Slider we can use to enhance our front end design. If you want more information about the ionic framework then click here.

Leave a Comment