Swiper needs window resize to work propperly

[lukasholzer]

Hey @camac I am facing the problem that I have one main Slider and a second slider that is navigating the main slider. My problem is that I always have to resize the window, so that the swiper is working propperly.

Therefore is it possible to loop the swipers? – It broke everything when I tried this.

I uploaded a live preview of my problem here. The files are on this branch github-swiper-issue-test in this repo.

The Markup simplified:

The original Markup code is found in this file: repertoire.twig

<container>
   <swiper-container navigation>
      <swiper-slide></swiper-slide>
      …
   </swiper-container>

   <swiper-container main>
      <swiper-slide></swiper-slide>
      …
   </swiper-container>
</container>

The Javascript code is the following:

import { Component, ElementRef } from 'mojiito-core';

@Component({
  selector: '.repertoire'
})
export class RepertoireComponent {

  private static NAV_CONTAINER = 'nav.swiper-container';
  private static WORK_CONTAINER = 'main.swiper-container';

  private navMobile = document.querySelector('.mobile-navigation') as HTMLSelectElement;
  private navigation: Swiper;
  private works: Swiper;

  constructor(private elementRef: ElementRef) {

    this.initSwipers();
    this.navMobile.addEventListener('change', (event: Event) => {
      this.navigation.slideTo(parseInt(this.navMobile.value));
    });
  }

  initSwipers() {

    this.works = new Swiper(RepertoireComponent.WORK_CONTAINER, {
      mousewheelControl: true,
      mousewheelForceToAxis: true,
      mousewheelInvert: true,
      autoHeight: true,
      slidesPerView: 'auto',
    });

    this.navigation = new Swiper(RepertoireComponent.NAV_CONTAINER, {
      spaceBetween: 10,
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      mousewheelControl: true,
      keyboardControl: true,
      touchRatio: 0.2,
      slideToClickedSlide: true,
      onSlideChangeStart: () => {
        this.navMobile.selectedIndex = this.navigation.activeIndex;
      }
    });

    this.works.params.control = this.navigation;
    this.navigation.params.control = this.works;

  }

}

[camac]

Hi Lukas, sorry I think you have the wrong github project! my Swiper project is a plugin for IBM Domino Designer Cameron

On Fri, 29 Sep 2017 at 23:33, Lukas Holzer notifications@github.com wrote:

Hey @camac https://github.com/camac I am facing the problem that I have one main Slider and a second slider that is navigating the main slider. My problem is that I always have to resize the window, so that the swiper is working propperly.

I uploaded a live preview of my problem here http://robertholzer.typeflow.cc/. The files are on this branch github-swiper-issue-test https://github.com/lukasholzer/robert-holzer/tree/feature/github-swiper-issue-test in this repo https://github.com/lukasholzer/robert-holzer. The Markup simplified:

The original Markup code is found in this file: repertoire.twig https://github.com/lukasholzer/robert-holzer/blob/feature/github-swiper-issue-test/theme/views/repertoire.twig

… …

The Javascript code is the following:

import { Component, ElementRef } from 'mojiito-core';

@Component({ selector: '.repertoire' })export class RepertoireComponent {

private static NAV_CONTAINER = 'nav.swiper-container'; private static WORK_CONTAINER = 'main.swiper-container';

private navMobile = document.querySelector('.mobile-navigation') as HTMLSelectElement; private navigation: Swiper; private works: Swiper;

constructor(private elementRef: ElementRef) {

this.initSwipers();
this.navMobile.addEventListener('change', (event: Event) => {
  this.navigation.slideTo(parseInt(this.navMobile.value));
});

}

initSwipers() {

this.works = new Swiper(RepertoireComponent.WORK_CONTAINER, {
  mousewheelControl: true,
  mousewheelForceToAxis: true,
  mousewheelInvert: true,
  autoHeight: true,
  slidesPerView: 'auto',
});

this.navigation = new Swiper(RepertoireComponent.NAV_CONTAINER, {
  spaceBetween: 10,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  mousewheelControl: true,
  keyboardControl: true,
  touchRatio: 0.2,
  slideToClickedSlide: true,
  onSlideChangeStart: () => {
    this.navMobile.selectedIndex = this.navigation.activeIndex;
  }
});

this.works.params.control = this.navigation;
this.navigation.params.control = this.works;

}

}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/camac/Swiper/issues/21, or mute the thread https://github.com/notifications/unsubscribe-auth/AAofIpuiXJFTk6DTJtrg1I4odqcdWsYSks5snPF_gaJpZM4Porjp .