Ion-slides not working in the first tab

Ionic Framework ionic-v3
1

Hi,

I encounter a weird bug when using ion-slides in the tab layout.

I simply use the tabs template to start, then modify the content in the template html as below.

    
      
        
Slide 1

      
      
        
Slide 2

      
      
        
Slide 3

When sweeping to the right, the slide control doesn’t move to the next slide.
But if I put the same content in the second tab, the slide control works.

Maybe it’s related to the below question. Could someone take a look? Thanks.

2

I think I found the root cause.
When sliding to the next slide, it needs to use the slideSize.

slideSize = (s.size - (s.params.slidesPerView - 1) * spaceBetween) / s.params.slidesPerView;

The slideSize depends on s.size, which is calculated by s.updateContainerSize

          if (typeof s.params.width !== 'undefined') {
              width = s.params.width;
          }
          else {
              width = s.container[0].clientWidth;
          }

The problem is s.container[0] is not displayed in the view yet, so the width is 0.
The s.updateContainerSize is called in the Sweeper constructor and Sweeper constructor is called in the ngOnInit function of the slide component.

        setTimeout(function () {
            var swiper = new swiper_widget_1.Swiper(_this.getNativeElement().children[0], options);
            _this.slider = swiper;
        });

I’m thinking it should probably be called in the ngAfterViewInit function.
I will submit an issue in the Github repository.

3

Created issue https://github.com/driftyco/ionic/issues/7251

1 Like