# SlideBox Images Carousel

**URL:** <https://forum.ionicframework.com/t/slidebox-images-carousel/315>\
**Category:** ionic-v1\
**Created:** [December 21, 2013, 9:25am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315 "2013-12-21T09:25:50Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![shayke](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@shayke](https://forum.ionicframework.com/u/shayke)\
**Post date:** [December 21, 2013, 9:25am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/1 "2013-12-21T09:25:50Z")

</div>

I’m pretty sure it’s not strictly related to the ionic framework  
but I’m looking for a way to make an images carousel full width (100%) and that the images adjust their height accordingly.  
The carousel itself is going to be on the top of the page but not taking the entire content (below it I’ll have some more text etc).  
I’m not sure if putting a fixed height will do (e.g 150px) since I want it to be different on tablets etc.

Any ideas?

---

<div class="post-metadata">

**Author:** ![declandewet](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@declandewet](https://forum.ionicframework.com/u/declandewet)\
**Post date:** [December 21, 2013, 9:32am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/2 "2013-12-21T09:32:52Z")

</div>

I’m not sure how flexible the SlideBox in Ionic is yet, but as an alternative, this seems to be a viable one: [https://github.com/revolunet/angular-carousel](https://github.com/revolunet/angular-carousel)

It allows for custom controls, too. As for the heights being different on different devices, remember that in Cordova/Phonegap the `./merges/` folder is specifically for platform-specific overrides, and for differing width/height devices you can always use a CSS3 media query:

```auto
.image-carousel {
  height: 150px;
}

@media screen and (min-height: 500px) {
  .image-carousel {
    height: 250px;
  }
}

```

---

<div class="post-metadata">

**Author:** ![shayke](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@shayke](https://forum.ionicframework.com/u/shayke)\
**Post date:** [December 21, 2013, 9:37am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/3 "2013-12-21T09:37:18Z")

</div>

Thanks!

I wanted to know if this is doable with the ionic slide box, here is my plunk: [http://plnkr.co/edit/GalE7na0oLUEkzKsi5IL?p=preview](http://plnkr.co/edit/GalE7na0oLUEkzKsi5IL?p=preview)  
I’ll give the angular one a try, thanks a lot!

---

<div class="post-metadata">

**Author:** ![ajmercer](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@ajmercer](https://forum.ionicframework.com/u/ajmercer)\
**Post date:** [December 23, 2013, 12:51am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/4 "2013-12-23T00:51:44Z")

</div>

The [http://code.ionicframework.com/nightly](http://code.ionicframework.com/nightly) does not have the latest code from github??

New features added

```
<slide-box show-pager="true" does-continue="true" slide-interval="5000" disable-scroll="false">

```

I tried this hack, but github serves .js files as plain/text

```
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/nightly/css/ionic.css">
<link rel="stylesheet" href="style.css">
  
<script src="https://raw.github.com/driftyco/ionic/master/dist/js/ionic.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular-animate.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular-route.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular-touch.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular-sanitize.js"></script>
<script src="https://raw.github.com/driftyco/ionic/master/dist/js/ionic-angular.js"></script>

<script src="script.js"></script>

```

```
<header class="bar bar-header bar-positive">
    <h1 class="title">{{title}}</h1>
</header>

<content has-header="true">
    <slide-box show-pager="true" does-continue="true" slide-interval="5000" disable-scroll="false">
        <slide>
            <img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
        </slide>
        <slide>
            <img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
        </slide>
        <slide>
            <img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
        </slide>
    </slide-box>
</content>

```

---

<div class="post-metadata">

**Author:** ![ajmercer](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@ajmercer](https://forum.ionicframework.com/u/ajmercer)\
**Post date:** [December 23, 2013, 12:59am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/5 "2013-12-23T00:59:46Z")

</div>

got this code running here  
[http://www.psl.com.au/labs/mobile/slider.html](http://www.psl.com.au/labs/mobile/slider.html)

---

<div class="post-metadata">

**Author:** ![declandewet](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@declandewet](https://forum.ionicframework.com/u/declandewet)\
**Post date:** [December 23, 2013, 9:00am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/6 "2013-12-23T09:00:53Z")

</div>

There is a service that corrects the .js files as plain/text - check it out: [https://rawgithub.com](https://rawgithub.com)

---

<div class="post-metadata">

**Author:** ![ajmercer](https://avatars.discourse-cdn.com/v4/letter/a/2bfe46/32.png) [@ajmercer](https://forum.ionicframework.com/u/ajmercer)\
**Post date:** [December 23, 2013, 10:31pm UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/7 "2013-12-23T22:31:34Z")

</div>

cool - thanks for the tip

> **[Plunker - Untitled](http://plnkr.co/edit/N8CTKUmWIkgvgLNTYERe?p=preview)**
>
> Created on https://plnkr.co: Helping you build the web.

---

<div class="post-metadata">

**Author:** ![shayke](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@shayke](https://forum.ionicframework.com/u/shayke)\
**Post date:** [December 24, 2013, 7:33am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/8 "2013-12-24T07:33:57Z")

</div>

Thanks a lot!  
Somehow I get an internal error from your plnkr but i got the idea, really appreciate it.

---

<div class="post-metadata">

**Author:** ![thijs](https://avatars.discourse-cdn.com/v4/letter/t/a4c791/32.png) [@thijs](https://forum.ionicframework.com/u/thijs)\
**Post date:** [February 4, 2014, 4:54pm UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/10 "2014-02-04T16:54:21Z")

</div>

Maybe it will help somebody: if you want ajmercer’s plunkers to work you need to add another script in the head-section:

```
<script src="http://code.ionicframework.com/nightly/js/angular-ui/angular-ui-router.js"></script>

```

Also, for the slider to look good I’d add the following style rule:

```
.slider-slide img { width: 100%; }
```

---

<div class="post-metadata">

**Author:** ![BMX700](https://avatars.discourse-cdn.com/v4/letter/b/4af34b/32.png) [@BMX700](https://forum.ionicframework.com/u/BMX700)\
**Post date:** [April 27, 2015, 2:03pm UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/11 "2015-04-27T14:03:34Z")

</div>

I did it in that way and it seems to work. I hope it will be helpful to someone 🙂

```
<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
    <ion-slide>
        <img src="my-pic-1.jpeg" />
    </ion-slide>
    <ion-slide>
        <img src="my-pic-2.jpeg" />
    </ion-slide>
    <ion-slide>
        <img src="my-pic-3.jpeg" />
    </ion-slide>
</ion-slide-box>
```

---

<div class="post-metadata">

**Author:** ![Gajotres](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gajotres/32/98564_2.png) [@Gajotres](https://forum.ionicframework.com/u/Gajotres)\
**Post date:** [August 28, 2015, 10:11pm UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/12 "2015-08-28T22:11:40Z")

</div>

> [@shayke](#):
>
> I’m pretty sure it’s not strictly related to the ionic frameworkbut I’m looking for a way to make an images carousel full width (100%) and that the images adjust their height accordingly.

I wrote a working tutorial for you, this example is also included. This examples is not using ionic slide box, what the point. We will use another AngularJS plugin made compatible with Ionic Framework.

###Read it [here](http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/).

###Ionic Framework View ID: 9E15B2DB

---

<div class="post-metadata">

**Author:** ![salqadri](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@salqadri](https://forum.ionicframework.com/u/salqadri)\
**Post date:** [September 10, 2015, 2:45am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/13 "2015-09-10T02:45:36Z")

</div>

Hey man @Gajotres there are no screenshots or video or demo code in your article. Can you please add something so I know what it is u r trying to do.

---

<div class="post-metadata">

**Author:** ![Gajotres](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gajotres/32/98564_2.png) [@Gajotres](https://forum.ionicframework.com/u/Gajotres)\
**Post date:** [September 10, 2015, 6:07am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/14 "2015-09-10T06:07:06Z")

</div>

The article has two pages, you can download the code from the second one. There’s also an Ionic View 9E15B2DB, you jut need to read 🙂 don’t look for pictures

---

<div class="post-metadata">

**Author:** ![salqadri](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@salqadri](https://forum.ionicframework.com/u/salqadri)\
**Post date:** [September 13, 2015, 4:27am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/15 "2015-09-13T04:27:49Z")

</div>

I want to see pictures so that I understand what it is that the article is trying to demonstrate. What is an Ionic View ID and what can I do with it?

---

<div class="post-metadata">

**Author:** ![Gajotres](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gajotres/32/98564_2.png) [@Gajotres](https://forum.ionicframework.com/u/Gajotres)\
**Post date:** [September 13, 2015, 9:47am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/16 "2015-09-13T09:47:24Z")

</div>

Google it and you’ll find everything.

---

<div class="post-metadata">

**Author:** ![enamul95](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/enamul95/32/107208_2.png) [@enamul95](https://forum.ionicframework.com/u/enamul95)\
**Post date:** [June 2, 2016, 9:48am UTC](https://forum.ionicframework.com/t/slidebox-images-carousel/315/17 "2016-06-02T09:48:51Z")

</div>

Hello BMX700  
I want to slide image like text sliding  
[http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview](http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview)

if it is like that please give controller code.  
please help me…