Tech

Making simple and handy slides using Ion-slide

13 December 2017

Hello, this time we will see you in most applications today, I will make an ion-slide (slides) appearance that has a lot of populations.

Ionic slide example

Ionic slide example

 

Initially, we open an empty ionic application.

 

ion-slide start

ion-slide start

 

1.Lets Start ion-slide

When Ionic opens

ionic serve

we are bringing our project to life.

If you dont know how to open new project in ionic you can review my guide !

When you open your project, ionic has a default code string. We will play this game with a bit of code and make our project what we want. First we create ion-slides and insert ion-slide objects into them. I put my images into ion-slides.

These images are the ordinary campaign pictures and pictures I found on the internet, and I put the “img” directory that I created into the “Assets” folder. In code writing, I give the paths of images as this “img” folder.

 

ionic slide design

ionic slide design

 

ion-slides’ with various features. These are “loop”, “pager”, “effect” and “autoplay”.

ion slide attributes

ion slide attributes

To put it briefly.

* loop: We can detect it as a loop. If you want the images to rotate continuously, you can set it to “true”. You will not be able to see any more slides after they are displayed or shifted.

* pager: Slides are features that allow you to see the small blue, white dots below you that you usually see.

* effect: You can give 5 different effects on the name, the property that you can give the slideshow effect.

* AutoPlay: The feature that allows slides to play continuously requires you to give it a numeric value. I’m giving it 3000, which means it’s a change of 3000 milliseconds.

ion-slides can add a new feature that takes other features than these features, or you can click here to review if you want to change the values ​​of the features we give.

 

This is the latest version.

 

<ion-header>
<ion-navbar>
<ion-title>
Ionic Slide-Segment Dizayn Ekranı
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides class=”slide-bicim” loop=”true” pager=”false” effect=”fade” autoplay=”3000″>
<ion-slide>
<img class=”dizayn” src=”assets/img/reklam1.jpg”>
</ion-slide>
<ion-slide>
<img class=”dizayn” src=”assets/img/reklam2.jpg”>
</ion-slide>
<ion-slide>
<img class=”dizayn” src=”assets/img/reklam3.jpg”>
</ion-slide>
<ion-slide>
<img class=”dizayn” src=”assets/img/reklam4.jpg”>
</ion-slide>
</ion-slides>
</ion-content>

As you can see, img and ion-slides have a class of objects.

– “slide-bicim”: I give the slides the width and aspect ratio. Otherwise, the pictures will come in the original dimensions as well.

– “dizayn”: These codes enable the slides to be responsive and ensure that the screen compatibility is in full form.

page-home {
.slide-bicim
{
width:100%;
height:30%;
}
.dizayn
{
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
width: 100%;
}
}

Thus, we have successfully made an ion-slide. ion-slide, we recommend that the pictures be of good quality. You can do a lot of things about ion-slide, especially for the “discover” feature of applications. You can add videos to this area or you can interest short text users. By linking from slides you can make it easier for users to do things and to highlight what you put in that space.

See you…

 

 

You Might Also Like

4 Comments

  • Reply Vanda 11 August 2018 at 17:02

    I used to be more than happy to seek out this net-site.I wanted to thanks to your time for this excellent read!! I positively having fun with each little bit of it and I’ve you bookmarked to take a look at new stuff you weblog post.

  • Reply Denisse Estergard 21 August 2018 at 00:44

    I used to be very happy to seek out this internet-site.I wanted to thanks for your time for this wonderful read!! I undoubtedly having fun with each little bit of it and I’ve you bookmarked to check out new stuff you weblog post.

  • Leave a Reply

    Emre Akbaki