Question

我正在尝试使用离子幻灯片组件在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

案例是您在幻灯片中使用按钮，当您更换幻灯片时它会消失，您需要使用滑块外的按钮和绝对位置，以便它可以越过滑块。 / p>

<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;
}

你的其他部分由你决定。

希望这有帮助。

仅更改离子滑块中的图像而不是按钮

1 个答案: