# Ionic slide box - basic example?

**URL:** <https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725>\
**Category:** ionic-v1\
**Created:** [November 1, 2017, 8:08pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725 "2017-11-01T20:08:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![SubEffect](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subeffect/32/65247_2.png) [@SubEffect](https://forum.ionicframework.com/u/SubEffect)\
**Post date:** [November 1, 2017, 8:08pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/1 "2017-11-01T20:08:28Z")

</div>

I’m very confused about the slide boxes now. I’ve had them working before, but I’m mostly migrated to Ionic 2 so coming back to implement slideboxes in an older v1 project is proving… challenging.

I’m trying a test with the html from the docs:

```auto
<ion-content scroll="false">
  <ion-slides options="options" slider="data.slider">
    <ion-slide-page>
      <div class="box blue"><h1>BLUE</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box yellow"><h1>YELLOW</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box pink"><h1>PINK</h1></div>
    </ion-slide-page>
  </ion-slides>
</ion-content>

```

And added this to my controller.js:

```auto
angular.module('algorithms.controllers', [])

.controller('AlgCtrl', function($scope, $ionicModal, $ionicPopover, $ionicSlideBoxDelegate) {

```

As you can see - I’m using modals and popovers already.

Finally I’ve added this code to controller.js, after my modal and popover code:

```auto

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

```

I know what it’s supposed to look like but I just get the three div boxes stacked on top of each other. I can scroll down and up, but there is no swipe.

What have I done wrong?

---

<div class="post-metadata">

**Author:** ![thesourav](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@thesourav](https://forum.ionicframework.com/u/thesourav)\
**Post date:** [November 1, 2017, 9:01pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/2 "2017-11-01T21:01:05Z")

</div>

Whats your slider options?  
The direction should be horizontal

---

<div class="post-metadata">

**Author:** ![SubEffect](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subeffect/32/65247_2.png) [@SubEffect](https://forum.ionicframework.com/u/SubEffect)\
**Post date:** [November 1, 2017, 9:24pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/3 "2017-11-01T21:24:25Z")

</div>

This is Ionic v1 - there doesn’t seem to be any direction option and I haven’t seen one in any of the examples.

---

<div class="post-metadata">

**Author:** ![thesourav](https://avatars.discourse-cdn.com/v4/letter/t/a6a055/32.png) [@thesourav](https://forum.ionicframework.com/u/thesourav)\
**Post date:** [November 1, 2017, 11:18pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/4 "2017-11-01T23:18:52Z")

</div>

You can take reference from here

> **[Ionic ion-slides (Swiper) example](https://codepen.io/-kaik-/pen/ONNzWe)**
>
> ...

---

<div class="post-metadata">

**Author:** ![baviskarmitesh](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@baviskarmitesh](https://forum.ionicframework.com/u/baviskarmitesh)\
**Post date:** [November 3, 2017, 12:24pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/5 "2017-11-03T12:24:39Z")

</div>

You can refer bellow link

> **[Tabbedslidebox](https://market.ionicframework.com/plugins/tabbedslidebox)**
>
> ionic slidebox with scrollable tabs

---

<div class="post-metadata">

**Author:** ![SubEffect](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subeffect/32/65247_2.png) [@SubEffect](https://forum.ionicframework.com/u/SubEffect)\
**Post date:** [November 4, 2017, 11:22am UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/6 "2017-11-04T11:22:50Z")

</div>

This is far too complex.

I just want a simple slide between 4 pages.

---

<div class="post-metadata">

**Author:** ![DaDanny](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dadanny/32/90685_2.png) [@DaDanny](https://forum.ionicframework.com/u/DaDanny)\
**Post date:** [November 6, 2017, 2:23am UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/7 "2017-11-06T02:23:39Z")

</div>

Did you take a look at the Codepen @thesourav posted? That isn’t very complex and sounds exactly like what you are trying to achieve.

Based on your initial post, my guess is you aren’t applying any styles to the slides, so they aren’t “stacking” correctly. I’d recommend setting the width and height of the slidebox and the containing slides.

---

<div class="post-metadata">

**Author:** ![SubEffect](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subeffect/32/65247_2.png) [@SubEffect](https://forum.ionicframework.com/u/SubEffect)\
**Post date:** [November 18, 2017, 7:10pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/8 "2017-11-18T19:10:49Z")

</div>

I went with a different method.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:07pm UTC](https://forum.ionicframework.com/t/ionic-slide-box-basic-example/110725/9 "2021-07-19T22:07:01Z")

</div>

Closed on July 19, 2021, 10:07pm UTC