Ionic 3!! a slide + two buttons down side by side

Question

I want to create a slide with two buttons below. But I managed to put the two buttons at the bottom side by side, but the slide doesn’t work when I try to move to slide 2, 3.

<ion-slides id="slide">

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

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

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

</ion-slides>

<ion-content >

  <button id="Entrar">Entrar</button>
  <button id="registrar">Registar</button>


</ion-content>

Code css

#Entrar {
  list-style-type: none;
  margin-top: 620px;
  height: 50px;
  width: 188px;
  float: right;
  font-size: 25px;
  background-color: rgb(0, 89, 255);


}
#registrar{
  list-style-type: none;
  margin-top: 620px;
  display: inline-block;
  height: 50px;
  width: 187px;
  background-color: rgb(0, 89, 255);
  font-size: 25px;




}

Answer 1

Good afternoon. From what I understand you want to have a slide and below this slide you want to add 2 buttons.

I did using the components that come along with Ionic 3, in case you have already used bootstrap 3 is easier to understand.

I deleted the classes I had and created only one class .estilo-slide To determine a slide height, you can change or remove if you want, depending on your use. Already in HTML I simply added some classes that are native to Ionic to make development more agile.

I created the div before the buttons to place the native class text-xs-center that centralizes the elements within the div, in this case its buttons.

Already on the buttons I used class="pt-xs--4" ion-button color="primary" which means respectively 20px/4 padding-top, ion-button call Ionic button and finally the button color.

Everything I said here is on documentation of Ionic 3.

The final code went like this:

HTML:

<ion-content>
    <ion-slides class="estilo-slide">

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

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

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

    </ion-slides>

    <div class="text-xs-center">
      <button class="pt-xs--4" ion-button color="primary">Entrar</button>
      <button class="pt-xs--4" ion-button color="secondary">Registar</button>
    </div>

</ion-content>

CSS:

.estilo-slide{
    height: 50%;
}