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

**URL:** <https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898>\
**Category:** Ionic Framework\
**Created:** [November 5, 2019, 5:45am UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898 "2019-11-05T05:45:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![elduderino15](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/elduderino15/32/105188_2.png) [@elduderino15](https://forum.ionicframework.com/u/elduderino15)\
**Post date:** [November 5, 2019, 5:45am UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/1 "2019-11-05T05:45:58Z")

</div>

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!

 ![](https://global.discourse-cdn.com/ionicframework/original/3X/b/0/b03c45810ce1ef06cd07b69c28b0c9cb170ad8ee.jpeg)

---

<div class="post-metadata">

**Author:** ![zvihersh1](https://avatars.discourse-cdn.com/v4/letter/z/ba9def/32.png) [@zvihersh1](https://forum.ionicframework.com/u/zvihersh1)\
**Post date:** [November 5, 2019, 9:37am UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/2 "2019-11-05T09:37:50Z")

</div>

you can use `<ion-list>` with `<ion-slides>` on top of it

---

<div class="post-metadata">

**Author:** ![elduderino15](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/elduderino15/32/105188_2.png) [@elduderino15](https://forum.ionicframework.com/u/elduderino15)\
**Post date:** [November 6, 2019, 6:12am UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/3 "2019-11-06T06:12:42Z")

</div>

Thanks ! Any example code you know?

---

<div class="post-metadata">

**Author:** ![zvihersh1](https://avatars.discourse-cdn.com/v4/letter/z/ba9def/32.png) [@zvihersh1](https://forum.ionicframework.com/u/zvihersh1)\
**Post date:** [November 6, 2019, 8:21am UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/4 "2019-11-06T08:21:17Z")

</div>

this is a very basic implementation

```auto
<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>

```

```auto
.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](https://www.npmjs.com/package/ionic4-hidenav) npm package that can help you with the shrinking header situation

---

<div class="post-metadata">

**Author:** ![elduderino15](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/elduderino15/32/105188_2.png) [@elduderino15](https://forum.ionicframework.com/u/elduderino15)\
**Post date:** [March 30, 2020, 11:07pm UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/5 "2020-03-30T23:07:46Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 30, 2020, 11:15pm UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/6 "2020-03-30T23:15:32Z")

</div>

> [@elduderino15](#):
>
> How can I size down the width of the slide item?

I would suggest going through [the copious Swiper documentation](https://swiperjs.com/api/). Keep in mind that mobile device screen orientations tend to be myriad and shifting.

---

<div class="post-metadata">

**Author:** ![elduderino15](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/elduderino15/32/105188_2.png) [@elduderino15](https://forum.ionicframework.com/u/elduderino15)\
**Post date:** [April 12, 2020, 3:38am UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/7 "2020-04-12T03:38:31Z")

</div>

That looks great. How can I get

```auto
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](https://swiperjs.com/demos/)

---

<div class="post-metadata">

**Author:** ![elduderino15](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/elduderino15/32/105188_2.png) [@elduderino15](https://forum.ionicframework.com/u/elduderino15)\
**Post date:** [April 12, 2020, 9:26pm UTC](https://forum.ionicframework.com/t/sliding-boxes-implementation-whats-the-proper-ui-name/176898/8 "2020-04-12T21:26:50Z")

</div>

Nevermind, found it in the ionic documentation…