Ion-slide-box not working

ionic-v1
1

Hy folks,

I try to implement a simple slider:

Base view:

<ion-nav-view class="test" name="menuContent"></ion-nav-view>

State:

.state('app.tour', {
            url: '/tour',
            views: {
              'menuContent': {
                templateUrl: 'app/components/tour/tour.html',
                controller: 'TourCtrl'
              }
            }
          })

Slider:

<ion-view  title="Tour Slides" >
  <ion-content direction="x" >
<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true" >
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>
	</ion-content>
</ion-view>

But the pagination sticks at top and swipe screnn do not change slide…
Could anybody be so kind and hepl me a bit??

2

I know this is a basic question but since ionic update nothing work. Do i need a ion-view? Do i need custom css to get slides full height?

Please help.

3

Solved now with a bit of css.

4

@BioPhoton could you share how you solved this issue? The pager shows in my case but i can no longer swipe to change slides

5

Here it goes:

.slider {
  height: 100%;
}
.slider-slide {
  padding-top: 120px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

:grinning:

6

@BioPhoton Thanks a lot! But my problem was because i specified the “show-pager” directive on the
"ion-slide-box" element and also included the “ion-slide-pager” directive element inside the “ion slide box”.
:persevere: