Ion-slides only working after browser resize

@MaikDz wrote:

I have the following problem:
The slider (ion-slides) only works after I resize the browser or when I call the slider's update() function. If I don't do that, the slider won't let me change the slides. I can swipe the slide to an extent where I can see parts of the new slide, but when I release the mouse (or finger on mobile device) it snaps back to the first slide.

I tried calling the slider's update function on $ionicView.AfterEnter or $ionicView.loaded without success. Calling update() after a 1 second timeout after the slider has been initialized works most of the time, but that is not a solution.

After the update call or after I resized the browser, everything works as expected.

I wrote a SliderService so that I can reuse the code for every page of my app that needs the slider:

Service:

            this.createSlider = function (scope) {
                return {
                    slider: {},
                    data: {},
                    options: {
                        speed: 500,
                        direction: 'horizontal',
                        effect: 'slide',
                        pagination: false,
                        touchAngle: 25
                    }
                };
            };

            this.initSlider = function (scope) {
                scope.$watch("slider.data.slider", function (nv, ov) {
                    scope.slider.slider = scope.slider.data.slider;
                    if (scope.slider.slider) {
//                        $timeout(function () {
//                            scope.slider.slider.update();
//                        }, 750);
                    }
                });
            };

Controller:

            $scope.slider = SliderService.createSlider($scope);
            SliderService.initSlider($scope);

HTML:

<ion-view>
   <ion-pane>
      <ion-slides options="slider.options" slider="slider.data.slider">
         <ion-slide-page>
            <ion-content class="has-tabs-top" has-bouncing="false" overflow-scroll="false">

            </ion-content>
         </ion-slide-page>
         <ion-slide-page>
            <ion-content class="has-tabs-top" has-bouncing="false" overflow-scroll="false">

            </ion-content>
         </ion-slide-page>
      </ion-slides>
   </ion-pane>
</ion-view>

Posts: 1

Participants: 1

Read full topic