How can I implement a view similar to the iOS weather app feature where I can swipe between the hourly / daily forecast. How is this item called?
I’m referring to the now, 9PM, 10PM bar in the screenshot link below? What should I look for?
Is this somehow available in ionic?
Thanks!
you can use <ion-list>
with <ion-slides>
on top of it
Thanks ! Any example code you know?
this is a very basic implementation
<ion-content>
<ion-slides [options]="{slidesPerView: 7}">
<ion-slide class="hour" *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
<ion-label>wed</ion-label>
<ion-icon name="cloud"></ion-icon>
<ion-label>50</ion-label>
</ion-slide>
</ion-slides>
<ion-list>
<ion-item lines="none" class="day" *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
<ion-label>sunday</ion-label>
<ion-icon name="cloud"></ion-icon>
<ion-label class="ion-text-end">45 45</ion-label>
</ion-item>
</ion-list>
</ion-content>
.hour{
display: flex;
flex-direction: column;
}
.day{
display: flex;
}
and if you want the <ion-slides>
to be sticky you can put it in the <ion-header>
tag
additionally you can look at this npm package that can help you with the shrinking header situation
1 Like
I just got to this now, it works great for starters.
How can I size down the width of the slide item?
With the above code the size of the slides are same width as the screen.
Thanks for the help! 
I would suggest going through the copious Swiper documentation. Keep in mind that mobile device screen orientations tend to be myriad and shifting.
That looks great. How can I get
var swiper = new Swiper('.swiper-container', {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
the constructor with the native ionic slider? ^ taken from multiple slide demo
Nevermind, found it in the ionic documentation…