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

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的其余部分由你决定。

希望这可以帮助。