После изменения ссылки css в <head>in Angular 8 слайды Swiper не отображаются должным образом - PullRequest
Новая
       4

После изменения ссылки css в <head>in Angular 8 слайды Swiper не отображаются должным образом

0 голосов
/ 09 марта 2020

, поэтому у меня есть два css файла для веб-сайта muilt lang angular, и я переключил ссылки для них в теге head, но после этого слайдеры переместились вправо, и стрелки перелистывания не выполнили правильное действие для все свиперы на странице, я использовал жизненный цикл "ngAfterViewInit" и jquery, чтобы инициировать в нем swiper, однако после изменения страницы "route to other page" и возврата на страницу swiper, это исправлено. и вот пример одного из проводников, которые я использовал 

 import { Component, OnInit ,ElementRef, AfterViewInit } from '@angular/core';
 import  Swiper from 'swiper';
import * as jquery from 'jquery';
@Component({
  selector: 'footer-slider',
  templateUrl: './footer-slider.component.html',
  styleUrls: ['./footer-slider.component.scss']
})
export class FooterSliderComponent implements OnInit {
  swiper: any;
  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {

      var agSwiper = $('.footer-swiper-container');

      if (agSwiper.length > 0) {

        var sliderView = 1;
        var ww = $(window).width();
        console.log(ww)
        if (ww >= 1700) sliderView = 7;
        if (ww <= 1700) sliderView = 7;
        if (ww <= 1560) sliderView = 6;
        if (ww <= 1400) sliderView = 6;
        if (ww <= 1060) sliderView = 4;
        if (ww <= 800) sliderView = 3;
        if (ww <= 560) sliderView = 2;
        if (ww <= 400) sliderView = 1;

        var swiper = new Swiper('.footer-swiper-container', {
          slidesPerView: sliderView,
          spaceBetween: 0,
          loop: true,
          loopedSlides: 16,
          speed: 500,
          autoplay: true,
          autoplayDisableOnInteraction: true,
          centeredSlides: true
        });

        $(window).resize(function () {
          var ww = $(window).width();
          if (ww >= 1700) swiper.params.slidesPerView = 7;
          if (ww <= 1700) swiper.params.slidesPerView = 7;
          if (ww <= 1560) swiper.params.slidesPerView = 6;
          if (ww <= 1400) swiper.params.slidesPerView = 5;
          if (ww <= 1060) swiper.params.slidesPerView = 4;
          if (ww <= 800) swiper.params.slidesPerView = 3;
          if (ww <= 560) swiper.params.slidesPerView = 2;
          if (ww <= 400) swiper.params.slidesPerView = 1;
        });

        $(window).trigger('resize');



        agSwiper.mouseenter(function () {
          swiper.stopAutoplay;

        });

        agSwiper.mouseleave(function () {
          swiper.startAutoplay;
        });
      }


   }

}
...