0

Angular 2 と Webpack の開発者の皆さん、こんにちは。私はかなり長い間 angular 2 と systemjs を使用してきましたが、webpack は初めてでした (少し苦労して使い始めました)。

次のようなhtmlを持つコンポーネントがあります。

  <div id="partners-slider" class="partners">
        <div class="partners__slider js-slick-slider">
          <a class="partners__item"><img src="assets/logo-company-1.png" alt="">Elite Construction Group, LLC</a>
          <a class="partners__item"><img src="assets/logo-company-2.png" alt="">Pro Era Limited</a>
         </div></div>

基本的にスライダーです。私は、アニメーションやその他のもののために、多くのプロジェクトで使用するライブラリを持っています。

スライダーを開始する次のような関数があります。

function initPartnersSlider(container) {
var $partnersSlider = $(container) ;
if (!$partnersSlider.length) return;

$partnersSlider
  .find('.js-slick-slider')
  .slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 5,
    autoplay: true,
    accessibility: false,
    prevArrow: $partnersSlider.find('.js-partners-prev'),
    nextArrow: $partnersSlider.find('.js-partners-next'),
    responsive: [
      {
        breakpoint: 1100,
        settings: {
          slidesToShow: 4
        }
      },
      {
        breakpoint: 1000,
        settings: {
          slidesToShow: 3
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  });}

関数呼び出し:

initPartnersSlider('#partners-slider');

ここでの問題 $partnersSlider.lengthは常に 0 です。

私の理解によると、html要素はwebpack(prod)によって縮小されたファイル内に配置されます

main.bundle.js

index.html 内の外部 JavaScript ファイルをスクリプト タグとして参照しています。id="properties-slider"要素がmain.bundle.js?内にあるため、dom要素を認識していないようです。ライブラリコードでデバッグして見ることができます。

誰もそれをやったことがありますか?助けてくれてありがとう!

4

1 に答える 1