Почему Flickity css не загружается в Angular? - PullRequest
Новая
       37

Почему Flickity css не загружается в Angular?

0 голосов
/ 05 февраля 2020

Итак, я пытаюсь включить flickity карусель в мое приложение Angular. Я думаю, что технически это должно работать нормально, проблема, которая мешает ему заставить работать так, как должно, заключается в том, что ни один из css из flickity.css не загружается. Я надеялся, что у кого-то есть идея, почему это так.

Я добавил flickity в свое приложение, запустив npm install flickity.

После этого в моем component я добавил flickity как таковой: 

import * as flickity from 'flickity';

Затем я инициализировал все: 

  ngOnInit() {
    window.addEventListener("DOMContentLoaded", function() {
      this.carousel = document.querySelector('.container');
      console.log(this.carousel);
      this.flick = new flickity(this.carousel, {
        imagesLoaded: true,
        wrapAround: true
      });

      var imgs = this.carousel.querySelectorAll('.item img');
      console.log(imgs);
      var docStyle = document.documentElement.style;
      var transformProp = typeof docStyle.transform == 'string' ?
        'transform' : 'WebkitTransform';

      this.flick.on('scroll', function() {
        this.flick.slides.forEach(function(slide, i) {
          var img = imgs[i];
          var x = (slide.target + this.flick.x) * -1 / 3;
          img.style[transformProp] = 'translateX(' + x + 'px)';
        });
      });
    });
  }

По существу, все js вроде бы работают нормально, но ни один из присущих flickity не рендерится, то есть все из области просмотра flickity, buttons et c .. следовательно, все это не работает.

1 Ответ

1 голос
/ 05 февраля 2020

Вам необходимо добавить файл flickity css к вашему angular. json импорту, например, так:

angular. json

// ...
"styles": [
 // path to flickity css
 // I just made this up so you will have to double check the path to the css file
 "node_modules/flickity/dist/flickity.min.css"
]

Обратите внимание: вам нужно будет перезапустить свой проект, как только он будет добавлен, чтобы изменения вступили в силу.

ИЛИ

Согласно документам flickity Вы можете просто включить это 

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

в свой index.html

...