Sliding boxes implementation - what's the proper UI name?

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?

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-slides [options]="{slidesPerView: 7}">
      <ion-slide class="hour" *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
        <ion-icon name="cloud"></ion-icon>
      <ion-item lines="none" class="day" *ngFor="let item of [0,1,2,3,4,5,6,7,8,9]">
        <ion-icon name="cloud"></ion-icon>
        <ion-label class="ion-text-end">45 45</ion-label>
  display: flex;
  flex-direction: column;
  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! :slight_smile:

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…