[英]Owl Carousel is not working in Angular 4
I am working on angular 4 and I want to implement owl carousel in my application. 我正在开发angular 4,我想在我的应用程序中实现owl carousel。 I imported owl carousel in the application refer by this link https://www.npmjs.com/package/ng2-owl-carousel . 我通过此链接https://www.npmjs.com/package/ng2-owl-carousel引用了应用程序中的猫头鹰轮播。
But images is not coming. 但是图像还没有到来。 I am sharing in my code: 我正在分享我的代码:
home.component.ts home.component.ts
import { Component } from '@angular/core';
import {Http} from '@angular/http';
import {OwlCarousel} from 'ng2-owl-carousel';
import { ViewChild } from '@angular/core'
declare var $:any;
@Component({
moduleId:module.id,
templateUrl:'home.component.html'
})
export class HomeComponent{
public pageTitle:string ='Home';
@ViewChild('owlElement') owlElement: OwlCarousel
fun() {
this.owlElement.next([200])
//duration 200ms
}
object = {
link: "http://lorempixel.com/100/100"
}
}
home.component.html home.component.html
<owl-carousel
[options]="{items: 3, dots: false, navigation: false}"
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let image of images;let i = index">
<div class="thumbnail-image" [ng-style]="{'background-image':'url(/assets/img/images.jpg)'}"></div>
</div>
</owl-carousel>
app.module.ts app.module.ts
imports: [
BrowserModule,
HttpModule,
FormsModule,
OwlModule
]
Only next or prev is coming but Image is not coming. 只有下一个或上一个会出现,但图像不会出现。 I am new in angular 4. So I am not able to solve this problem. 我是angular 4的新手。所以我无法解决此问题。 I have seen links But Still I am not able to solve. 我看到了链接,但仍然无法解决。
angularjs ng-style: background-image isn't working angularjs ng-style:背景图像不起作用
Angular 2 - background image into a html file using ngStyle Angular 2-使用ngStyle将背景图像转换为html文件
i don't see any images inside your loop, add img inside your ngFor: 我在循环中看不到任何图像,请在ngFor中添加img:
<img src="{{image}}" style="" />
and use 和使用
[ngStyle] and not [ng-style]
have you included css and js as given in here 您是否包含了此处给出的css和js
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"
] ]
"styles": [ "../node_modules/owl.carousel/dist/assets/owl.carousel.css", "../node_modules/owl.carousel/dist/assets/owl.theme.default.css" ]
2]don't use background images use like below ` 2]请勿使用背景图片,如下所示:
` `
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.