feat: Slides: add elements outside `.swiper-wrapper`

[tricki]

Feature Request

Ionic version: [x] 4.x

Describe the Feature Request Adding a way to add a parallax background to a slider based on total slider progress. This requires an element that is a direct child of .swiper-container (outside .swiper-wrapper). Relevant Swiper docs

Describe Preferred Solution Add a new named slot outside of .swiper-wrapper.

Describe Alternatives Moving the parallax element manually after load.

Related Code

<ion-content>
  <ion-slides>
    <div
      slot="parallax"
      class="bg-parallax"
      style="background-image:url(https://loremflickr.com/320/240/)"
      data-swiper-parallax="-23%"
    ></div>
    <ion-slide>
      Slide 1
    </ion-slide>
    <ion-slide>
      Slide 2
    </ion-slide>
  </ion-slides>
</ion-content>

Additional Context Previous requests: https://github.com/ionic-team/ionic/issues/13584 https://github.com/ionic-team/ionic/issues/15330

[liamdebeasi]

Thanks for the issue. We recently exposed the full Swiper API in Ionic 4.9.0. Does having access to the full API solve your issue?

[tricki]

I don't think so since the parallax DOM element needs to be outside of the slot.

From the Swiper docs:

There are two types of parallax elements supported: [1] Direct child elements of swiper-container. Parallax effect for such elements will depend on total slider progress. Useful for parallax backgrounds

A slot outside of .swiper-wrapper would also be useful for adding things like prev/next buttons, especially with the new full API access.

[MarkChrisLevy]

@liamdebeasi Can you please take a look at #22598 - it is very small change, but very needed ;-)

[liamdebeasi]

Thanks for the issue! With the release of Ionic 6, we made the decision to deprecate ion-slides in favor of using Swiper.js directly.

Moving forward, ion-slides will only receive critical security fixes, and the component will be removed in Ionic 7. As a result, I am going to close this issue.

We have prepared migration guides for each of the 3 JavaScript frameworks we support, so developers can get started migrating right away.

Migration for Angular Migration for React Migration for Vue

We believe this change will lead to a healthier Ionic ecosystem as it frees up resources for the Ionic team to dedicate to other areas of this project while still giving developers options for carousels in their apps. Since ion-slides currently uses Swiper under the hood, the behavior of your carousels should remain the same even after you migrate.

For more information on the reasoning for and benefits of this change, please see the ion-slides documentation.

Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.