仅更改离子幻灯片中的图像而不更改按钮

Question

我正在尝试使用 ion-slides 组件在 Ionic 中创建一些幻灯片，我需要的是仅更改幻灯片上的图像，而不是按钮或界面交互。无论如何我能做到吗？

非常感谢。

我的代码是这样的：

  <ion-slides pager>
<ion-slide style="background-image:url(../../assets/img/disco.jpeg)">
  <button ion-button round small>Entrar sin cuenta</button>
  <div>
    <h2>Todas las discotecas en la palma de tu mano</h2>
  </div>
  <div>
    <button ion-button round small>Conéctate con Facebook</button>
  </div>
  <div>
    <button ion-button round small>Crear cuenta</button>
  </div>
  <div>
    <button ion-button round small>Crear cuenta</button>
  </div>
</ion-slide>
<ion-slide style="background-color: green">
  <h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: green">
  <h2>Slide 3</h2>
</ion-slide>
<ion-slide style="background-color: green">
  <h2>Slide 4</h2>
</ion-slide>

Answer 1

情况是您在幻灯片内使用按钮，当您更改幻灯片时它会消失，您需要在滑块外使用按钮并使用绝对位置，以便它可以越过滑块.

<ion-slides pager>
  <ion-slide style="background-color: green">
    <h2>Slide 2</h2>
  </ion-slide>
  <ion-slide style="background-color: green">
    <h2>Slide 3</h2>
  </ion-slide>
  <ion-slide style="background-color: green">
    <h2>Slide 4</h2>
  </ion-slide>
</ion-slides>
    <div class="over-slider">
        <button ion-button round small>Entrar sin cuenta</button>
        <div>
            <h2>Todas las discotecas en la palma de tu mano</h2>
        </div>
        <div>
            <button ion-button round small>Conéctate con Facebook</button>
        </div>
        <div>
            <button ion-button round small>Crear cuenta</button>
        </div>
        <div>
            <button ion-button round small>Crear cuenta</button>
        </div>
    </div>

你的css

.over-slider{
  position: absolute;
  top: 0;
  left: 0;
}

剩下的 css 由您决定。

希望对您有所帮助。

仅更改离子幻灯片中的图像而不更改按钮

Changing just images in ion-slides and not buttons

html

ionic2

ion-slides

ionic3