ion-slides will be deprecated beginning with Ionic 6

[alexhaller]

Beginning with Ionic 6 "ion-slides" component will be deprecated (https://ionicframework.com/blog/announcing-the-ionic-framework-v6-beta/). It´s recommended to switch to SwiperJs.

[AvniAnay]

@twinssbc Are there any plans to replace ion-slides with swiper ?

[rbertolig]

+1 about the need to update ionic-slides to swiper inside the ionic2-calendar code

[imanz7]

+1 to replace ionic slides with swiper

[twinssbc]

I have published a new version 1.0.1 which only relies on Swiper instead of IonSlides, feel free to give a try. Note that Swiper has become an dependency, so needs to include it in package.json explicitly.

[imanz7]

It works! Thanks

[rbertolig]

@twinssbc tested and it works ok with swiper instead of ion-slides.

I am just strugling not being able to display correctly the calendar component inside another swiper element ( nested ).

In my case I have a component to show several calendars from same user, so used a swiper to allow browsing all user calendars. But It seems to be some kind of css inherited forcing a ‘display: block;’ not any problem of the new version: the child swiper height ( with ionic2-calendar component ) it is not fully displayed inside the parent swiper-slides.

Tried with autoheight=true in swiper options and also height: 100% on parent swiper and swiper slides with no sucess. With manual override of browser console css noticed that ‘align-items: center;’ on .swiper .swiper-slides is causing the undesired behaviour, if anybody have an advise it will be welcome!

[twinssbc]

@rbertolig When I switch from IonSlides to Swiper, I notice that the css style of some slide container changes from display: block to display:flex. So I manually force it to be display: block. Maybe I need to use some alternative way. If you could provide some simple code sample, I may help to take a look. You could just fork this. https://stackblitz.com/edit/ionic-calendar-demo-1-0?file=src%2Fapp%2Fexample.component.html

[rbertolig]

@twinssbc thanks for the observation!, in fact noticed the real problem in my case was the 'display:flex' default style on the new ( parent ) swiper I created in my component to browse several calendars. Once I also forced my component's swiper to 'display:block' and 'height:100%' the ionic2-calendar component was loaded and nested full size and scrollable. Used a custom css class to set the parent swiper styles:

.user-calendars-swiper {
        display: block!important; 
        height: 100%;

        .swiper-container {
            height: 100%;
        }

        .swiper-slide {
            display: block!important;
            height: 100%;
        }
}