Menu
On my page I am having an ion-slide-box for images. Since in my app users will be able to embed videos, I should also add iframes with videos to the same slider. This is how my code looks like now:
This is my html:
<ion-slide-box ng-if="slider.length > 1">
<ion-slide ng-repeat="item in slider">
<img ng-if="item.image" ng-src="{{ fileServer }}/imagecache/cover/{{ item.image }}" class="cover">
<iframe ng-if="item.video" src="{{ item.video | safeUrl }}"></iframe>
</ion-slide>
</ion-slide-box>
This works fine with only images, but when I have videos I can't slide them if they take up 100% width, which I have set up in my css, I can only slide them if they are wide less than that and if I slide them only on that part where the iframe is not taking up space in the slider. Since I need to have iframe taking up 100% width, I wonder how to make it work?
575
The following documentation applies to the ion-slides component. By default, Ionic slides use the built-in slide animation effect. Custom animations can be provided via the options property. Examples of other animations can be found below. ? Math.max(1 - Math.abs($slideEl[0].progress), 0)
With the release of Ionic Framework v6, the Ionic Team has deprecated the ion-slides and ion-slide components in favor of using the official framework integrations provided by Swiper. Fear not! You will still be able to use slides components in your application.
The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of Slide components.
The library is bundled automatically with all versions of Ionic Framework. When Ionic Framework v4. was first released, Swiper did not have framework specific integrations of its library, so ion-slides was created as a way of bridging the gap between the core Swiper library and frameworks such as Angular, React, and Vue.
Have you tried ion-slides instead?
ion-slide-box is deprecated
ion-slide-box will be removed in the next Ionic release in favor of the new ion-slides component. Don't depend on the internal behavior of this widget.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
