With Ionic 4 the old ion-scroll is gone and with it the way we created a zoomable view. The good news is the Slides are still there and we can use them to create great effects and zooming inside our Ionic 4 app!
In the past we have used packages that allowed us to zoom in or a general package to create an image gallery. The problem is that if we rely on those packages and a new version like v4 comes out, we are lost.
Some packages are created once but then never really maintained (no offense, it is hard work!) so in this Quick Win we will use the standard components that we got to implement an image gallery with additional modal preview page and zoom.
The important aspect of the Ionic slides element is that it is based on the Swiper package and we can use basically everything this package offers even if it’s not (yet) documented on the official Ionic page!
The full quick win with snippets is only available to Ionic Academy members.
Join now for
- Unlimited access to all quick wins
- Library of 40+ step-by-step video courses
- Support for Ionic questions via Slack & private community
I did not understand this code very well:
@ViewChild('slider', { read: ElementRef })slider: ElementRef;Another step I did not understand:
let zoom = this.slider.nativeElement.swiper.zoom;Thank you! This will helpful!
Hey, the @ViewChild basically grabs a reference to the according DOM element and because it’s a shadow DOM component from Ionic we need to tell Angular to read the ElementRef!
For the zoom, this is just something I have found inside the documentation of the slider here: https://idangero.us/swiper/api/#zoom
Thank you Simon!
Thank you sir! This is Great!!!
This is what I get:
Am I missing some import or something?
In image-modal.page.html ion-slide not working, i mean next slide image not showing
You may need to increase the number of slides.