SlideBox Images Carousel

ionic-v1
1

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?

2

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

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:

.image-carousel {
  height: 150px;
}

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

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
I’ll give the angular one a try, thanks a lot!

4

The 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>
5

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

6

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

7

cool - thanks for the tip

8

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

10

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%; }
11

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

<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>
1 Like
12

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.

##Ionic Framework View ID: 9E15B2DB

13

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.

14

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 :slight_smile: don’t look for pictures

15

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?

16

Google it and you’ll find everything.

17

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

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