I am trying to implement "sliding images" in side-menu of Ionic-3.
Following is my code :
<ion-menu [content]="content">
<ion-content>
<ion-slides>
<ion-slide>
<img class="slide-image" src="img1.png">
</ion-slide>
<ion-slide>
<img class="slide-image" src="img2.png">
</ion-slide>
<ion-slide>
<img class="slide-image" src="img3.png">
</ion-slide>
</ion-slides>
<ion-list>
<p>some menu items</p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
The elements are rendering properly but the problem is that the <ion-slide>
is behaving like horizontal scroll view in side menu.
I have tried to disable the swipe gesture of side-menu but still the behavior of <ion-slide>
persist.
Even I have tried to use slideNext
and slidePrev
method of Slides
but they are not working.
Is there any way I can implement the sliding-images in side-menu either using Ionic-3 or third party library?
Verifying the ion-slides in the menu, the behaviour of these is normal in the sidemenu. Take a look in this link. these slides are only slides with a backgrounds of different colors.
the implementation is in the part of:
@App({
template: `
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-slides pager>
<ion-slide style="background-color: green">
<h2>Slide 1</h2>
</ion-slide>
<ion-slide style="background-color: blue">
<h2>Slide 2</h2>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
`
})
Making this work requires a little bit of bootstrapping in order to get the underlying Swiper library to properly initialize. The ion-menu starts out with display:none
, so Swiper cannot properly read the size using clientWidth
on the slide container.
See my answer here for code that shows how to deal with this problem: Is it possible to use slides in ionic sidebar
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.