集成到项目中后，ngx slick轮播无法正常工作 [英] ngx slick carousel not working after integrating in a project

问题描述

我分别创建了一个ngx光滑轮播，效果很好.但是，当我将其集成到一个项目中时，这些图片只是一张一张叠放在一起.我在这里可以做什么.

I created an ngx slick carousel seperately and it was working fine. But when I integrated in into a project, the pictures just stacked one above the other. What can I do here.

app.module.ts:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SlickCarouselModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '**********';

  images = [
    {'image': "assets/images/FBI.jpg"},
    {'image': "assets/images/SAS.jpg"},
    {'image': "assets/images/GIGN.jpg"},
    {'image': "assets/images/GSG9.jpg"},
    {'image': "assets/images/Spetsnaz.jpg"}
  ];

  slideConfig = {
    "slidesToShow" : 1,
    "slidesToScroll" : 1,
    "dots" : true,
    "infinite" : true,
    "autoplay" : true,
    "autoplaySpeed" : 3000,
    "showArrow" : false
  };
  
}

app.component.html:

app.component.html:

<div class="main-container">
  <div class="navigation">
    <div class="logo">
      Logo will be here
    </div>
    <div class="nav-container">
      <button class="nav-btn">******</button>
      <button class="nav-btn">********</button>
      <button class="nav-btn">***********</button>
      <button class="nav-btn">**************</button>
      <button class="nav-btn">***************</button>
      <button class="nav-btn">*************</button>
      <button class="nav-btn">*************</button>
      <button class="nav-btn">************</button>
      <button class="nav-btn">**************</button>
      <button class="nav-btn">***</button>
      <button class="nav-btn">*******************</button>
      <button class="nav-btn">***************</button>
      <button class="nav-btn">*****************</button>
    </div>
  </div>
  <div class="contents">
    <div class="header">
      <input class="search-box" type="text" name="main-search-box" placeholder="Search Your Question">
      <button class="btn">**********</button>
      <button class="btn">**********</button>
      <button class="btn">****</button>
      <button class="btn">***************</button>
      <button class="btn">*********</button>
    </div>
    <div class="sliding-image">
      <div class="row">
        <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">
          <div ngxSlickItem *ngFor="let image of images" class="slide">
            <img [src]="image.image" alt="slidingImage" width="100%" height="570px">
          </div>
        </ngx-slick-carousel>
      </div>
    </div>
    <div class="footer">
      <button class="btn">*****</button>
      <button class="btn">************</button>
      <button class="btn">************</button>
      <button class="btn">**********</button>
    </div>
  </div>
</div>

屏幕截图:

仅当我将高度(以百分比为单位)和屏幕的宽度减小时，堆栈才可见.并且在网络控制台中也显示了一些错误.

The stack is only visible when I put the height in percentage and when the screen's width is decreased. And there some error showing in the network console as well.

下面是孤立的图像滑块项目的屏幕截图:

Below is the screenshot of the isolated image slider project:

推荐答案

他们的文档说您需要JQuery(这对于声称是Angular插件的东西来说不太好...)

Their docs say you need JQuery (which is not great for something that claims to be an Angular plugin...)

https://www.npmjs.com/package/ngx-slick-carousel

您的控制台错误表明您缺少JQuery，因此很可能您没有正确地遵循设置来包含JQuery.

Your console error says you are missing JQuery, so its likely you didn't follow the set up properly to include JQuery.

文档说要通过npm安装jquery

The docs say to install jquery via npm

$ npm install jquery --save

然后将其添加到 angular.json 文件中的脚本中

And then add it to scripts in your angular.json file

 "scripts": [
    ...
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/slick-carousel/slick/slick.min.js",
    ...
  ]

请注意，Angular在该文件中可能有几个 scripts 部分，用于测试和正常运行该应用程序.可能您没有将两者都放入.

Note, Angular might have a few scripts sections in that file for testing and normal running of the app. Its possible you didn't put it in both.

这篇关于集成到项目中后，ngx slick轮播无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！