# Horizontal scrolling list items?

**URL:** <https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913>\
**Category:** ionic-v3\
**Created:** [July 7, 2016, 9:50pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913 "2016-07-07T21:50:32Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 7, 2016, 9:50pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/1 "2016-07-07T21:50:32Z")

</div>

Is it possible to have horizontal scrolling in an item list? What is the best way to achieve it?  
Using ‘ion-slides’ or ‘ion-scroll’?

---

<div class="post-metadata">

**Author:** ![itlr](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/itlr/32/97646_2.png) [@itlr](https://forum.ionicframework.com/u/itlr)\
**Post date:** [July 7, 2016, 11:29pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/2 "2016-07-07T23:29:53Z")

</div>

I suppose using [http://ionicframework.com/docs/v2/api/gestures/SlideGesture/](http://ionicframework.com/docs/v2/api/gestures/SlideGesture/) together with dynamic loading [https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.tv9buudjk](https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.tv9buudjk) could be a solution.

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 8, 2016, 1:01pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/3 "2016-07-08T13:01:40Z")

</div>

Thank you for your reply.

For a small number of items (\<10). Is it necessary to have the dynamic loading?  
I will try and create some sliding items and see what happens.

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 8, 2016, 10:15pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/4 "2016-07-08T22:15:39Z")

</div>

I was able to create sliding images but it’s on a full page with chevrons on it _(in yellow - left-side of image)._

I would like to get something like Airbnb’s recently viewed items on its home page _(right-side of image below)_

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/4/2427630518e31013aed8656c30b4cd6f7e978cab.jpg)

Is this possible to do with Ionic 2? Have part of the page with horizontal item scrolling? How to achieve it?  
I am thinking about injecting the slide template without the chevron into the main page. Is it the way forward? Would it be possible to have an example of nested views in Ionic 2?

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 8, 2016, 11:50pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/5 "2016-07-08T23:50:32Z")

</div>

With the code below, I was able to get the following view. I would like to take out the blank spaces left before and after ‘ion-slides’ _(the red crosses)_

![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/7/d768cccc99972e2de42fe52f8b91d685700f6f95.jpg)

![image](https://global.discourse-cdn.com/ionicframework/original/3X/9/c/9c337b9abdcd84b7e93ca007eded32c776f3d30c.PNG)

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 9, 2016, 2:44pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/6 "2016-07-09T14:44:44Z")

</div>

In the Ionic 2 documentation, I don’t see any options or method to adjust the slider’s size.

> **[Ionic Framework](https://ionicframework.com/docs/api/components/slides/Slides/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

In the Swiper API, I can see the _‘autoHeight’_ parameter which adjusts the slider’s size to the current slide.  
[http://idangero.us/swiper/api/](http://idangero.us/swiper/api/)

Now, I am trying to figure out how to use Swiper’s API with getSlider() method of ‘ion-slides’. Any ideas on this?

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 10, 2016, 12:16pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/7 "2016-07-10T12:16:13Z")

</div>

I have the following code and getting this error when trying to call the _getSlider()_ method of _‘ion-slides’_:  
_ **ORIGINAL EXCEPTION: TypeError: this.slider is undefined** _

I am trying to access the _autoHeight_ parameter of the swiper API in order to get rid of the blank spaced in _‘ion-slides’_.

**TypeScript File**

```
import {Component, ViewChild} from '@angular/core';
import {NavController, Slides} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    
    @ViewChild('mySlider') slider: Slides;

    SwiperInstance: any = this.slider.getSlider();
    
    items: Array<{name: string, image: string, color: string}>;
    itemstry2: string[] = ["One Piece", "Naruto", "Bleach", "Boruto", "Etc", "Life itself!"];

    mySlideOptions = {
            loop: true,
            //SwiperInstance.autoHeight = true  
    };

    constructor(private navController: NavController) {
        this.items = [
            {name: "One Piece", image: "http://bit.ly/22uwN0m", color:"yellow"},
            {name: "Image 2", image: "http://bit.ly/29FOl81", color:"#2662F7"},
            {name: "Image 3", image: "http://bit.ly/29qNtzK", color:"#FD4B4B"},
            {name: "Image 4", image: "http://bit.ly/29vtmQt", color:"#4BC14B"},
            {name: "Image 5", image: "http://bit.ly/29wxiTy", color:"orange"}
        ];
    }

    goToSlide() {
        this.slider.slideTo(4, 500);
    }

    onSlideChanged() {
        let currentIndex = this.slider.getActiveIndex();
        let slidelength = this.slider.length();
        
        console.log("Current index is", currentIndex);
    }
}

```

**Html File**

```
<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="home">
    
    <ion-list>
        <ion-item *ngFor="let item of itemstry2">
            {{item}}
        </ion-item>  
    </ion-list>
    
    <ion-slides #mySlider (ionDidChange)="onSlideChanged()" [options]="mySlideOptions" class="greencol">
        <ion-slide *ngFor="let item of items" class="yelcol" [ngStyle]="{'background-color': item.color}" >
            {{item.name}}
            <img src="{{item.image}}"/>
            <button light (click)="goToSlide()">Go to Last Slide</button>
        </ion-slide>
    </ion-slides>
    
    <ion-list>
        <ion-item *ngFor="let item of itemstry2">
            {{item}}
        </ion-item>
    </ion-list>
    
</ion-content>
```

---

<div class="post-metadata">

**Author:** ![piyukore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/piyukore/32/102073_2.png) [@piyukore](https://forum.ionicframework.com/u/piyukore)\
**Post date:** [July 11, 2016, 7:05am UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/8 "2016-07-11T07:05:46Z")

</div>

try calling  
`SwiperInstance: any this.slider.getSlider();`  
this statement inside function  
`ngAfterViewInit() {}`

viewchild elements can be accessedwhen the view ihas been initialized

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 11, 2016, 2:43pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/9 "2016-07-11T14:43:09Z")

</div>

> [@piyukore](#):
>
> try callingSwiperInstance: any this.slider.getSlider(); this statement inside functionngAfterViewInit() {}

Thanks for your reply.

I got the following error messages with this code.

> ```
> ngAfterViewInit() {
> SwiperInstance: any = this.slider.getSlider();
> }
> 
> ```

_Errors_

```
    TypeScript error - Error TS7028: Unused label.
    TypeScript error - Error TS2304: Cannot find name 'any'.

```

I also tried the following code and got additonal errors.

> ```
> ngAfterViewInit() {
> SwiperInstance: any = this.slider.getSlider();
> this.SwiperInstance.autoHeight = true;
> }
> 
> ```

Errors:

```
    TypeScript error - Error TS7028: Unused label.
    TypeScript error - Error TS2304: Cannot find name 'any'.
    TypeScript error - Error TS2339: Property 'SwiperInstance' does not exist on type 'HomePage'.

```

And I tried to call _@ViewChild_ in ngOnInit but got a TS Declaration expected error

> ```
> ngOnInit() {
> @ViewChild('mySlider') slider: Slides;
> SwiperInstance: any = this.slider.getSlider();
> }
> 
> ```

`Error: TypeScript error - Error TS1146: Declaration expected.`

---

<div class="post-metadata">

**Author:** ![piyukore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/piyukore/32/102073_2.png) [@piyukore](https://forum.ionicframework.com/u/piyukore)\
**Post date:** [July 11, 2016, 2:48pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/10 "2016-07-11T14:48:40Z")

</div>

the declataion @ViewChild should be before constructor and then use  
`SwiperInstance = this.slider.getSlider();`  
without any

```
export class SwiperClass {
@ViewChild('mySlider') slider: Slides;
SwiperInstance : any;
  ngAfterViewInit() {
    this.SwiperInstance = this.slider.getSlider();
    this.SwiperInstance.autoHeight = true;
  }
}
```

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 11, 2016, 2:58pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/11 "2016-07-11T14:58:47Z")

</div>

Thank you!!

This code is working fine.

> ```
> ngAfterViewInit() {
> this.SwiperInstance = this.slider.getSlider();
> }
> 
> ```

But with the additional line _this.SwiperInstance.autoHeight = true_, it gives me a console error.

> ```
> ngAfterViewInit() {
> this.SwiperInstance = this.slider.getSlider();
> this.SwiperInstance.autoHeight = true;
> }
> 
> ```

`ORIGINAL EXCEPTION: TypeError: this.SwiperInstance is undefined`

So there must be another way to access the _autoHeight_ parameter in the Swiper API.

> **[iDangero.us](https://idangero.us/swiper/api/)**
>
> Open source software & custom web development

---

<div class="post-metadata">

**Author:** ![piyukore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/piyukore/32/102073_2.png) [@piyukore](https://forum.ionicframework.com/u/piyukore)\
**Post date:** [July 11, 2016, 3:20pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/12 "2016-07-11T15:20:44Z")

</div>

If your problem is only to change slider height … you can define it in css as some fixed height

---

<div class="post-metadata">

**Author:** ![DeeM52](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/deem52/32/101606_2.png) [@DeeM52](https://forum.ionicframework.com/u/DeeM52)\
**Post date:** [July 11, 2016, 3:39pm UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/13 "2016-07-11T15:39:11Z")

</div>

> [@piyukore](#):
>
> If your problem is only to change slider height … you can define it in css as some fixed height

Simple and efficient. 🙂  
My second problem solved by you. Thanks alot =)

---

<div class="post-metadata">

**Author:** ![Rithie7](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rithie7/32/92578_2.png) [@Rithie7](https://forum.ionicframework.com/u/Rithie7)\
**Post date:** [February 11, 2017, 12:59am UTC](https://forum.ionicframework.com/t/horizontal-scrolling-list-items/56913/14 "2017-02-11T00:59:24Z")

</div>

Hi! I’ve got a question. Is your [option] property working properly?  
I tried the option ‘slidesPerView: 3’, and it didn’t change the view at all!!!