似乎无法弄清楚为什么我的轮播组件位于但没有显示任何 CSS 或图像。
我的 app.component.ts
import { Component } from '@angular/core';
//import our Carousel Component
import {CSSCarouselComponent} from './carousel.component';
@Component({
selector: 'my-app',
directives: [CSSCarouselComponent],
templateUrl: 'app/app.component.html'
//Tell Angular we are using the css-carousel tag in this component
})
export class AppComponent { }
carousel.component.ts
// Import Component form the angular core package
import {Component} from '@angular/core';
// Import the Image interface
import {Image} from './image.interface';
// Compoent Decorator
@Component({
//Name of our tag
selector: 'css-carousel',
//Template for the tag
template:`
<div class="cover">
<div class="carousel">
<ul class="slides">
<li *ngFor=" let image of images">
<h2>{{image.title}}</h2>
<img src="{{image.url}}" alt="">
</li>
</ul>
</div>
</div>
`,
//Styles for the tag
styles: [`
.carousel{
overflow:hidden;
margin: 0% auto;
padding:0% 25%;
width:50%;
}
.slides{
list-style:none;
position:relative;
padding-left:0;
width:500%; /* Number of panes * 100% */
overflow:hidden; /* Clear floats */
/* Slide effect Animations*/
-moz-animation:carousel 30s infinite;
-webkit-animation:carousel 30s infinite;
animation:carousel 30s infinite;
}
.slides > li{
position:relative;
float:left;
width: 20%; /* 100 / number of panes */
}
.carousel img{
display:block;
width:100%;
max-width:100%;
}
.carousel img:not(:first-child){
float:left;
}
.cover{
width:100%;
margin: 0% 10%;
padding-right: 5%;
padding-left: 5%;
background-color:white;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee;
}
.carousel h2{
margin-bottom: 0;
font-size:1em;
padding:1.5em 0.5em 1.5em 0.5em;
position:absolute;
right:0px;
bottom:0px;
left:0px;
text-align:center;
color:#fff;
background-color:rgba(0,0,0,0.75);
text-transform: uppercase;
}
@keyframes carousel{
0%, 23% {margin-left:0}
25%, 48% { margin-left:-105%; }
50%, 73% { margin-left:-205%; }
75%, 82% { margin-left:-305%;}
84%, 97% { margin-left:-405%;}
100% { margin-left:0;}
}
`],
})
//Carousel Component itself
export class CSSCarouselComponent {
//images data to be bound to the template
public images = IMAGES;
}
//IMAGES array implementing Image interface
var IMAGES: Image[] = [
{ "title": "Cod en Papillote ", "url": "images/cod.jpg" },
{ "title": "Lobster & Lox", "url": "images/lox.jpg" },
{ "title": "Omelette en Ciabatta", "url": "images/omlette.jpg" },
{ "title": "Tuna-Cheese Crackers", "url": "images/tuna.jpg" },
{ "title": "Homemade Thai Tea", "url": "images/tea.jpg" },
];
用于声明图像的图像类
export interface Image {
title: string;
url: string;
}
我的 app.component.html(这是轮播应该显示的地方)
<!-- Navbar Info -->
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<a href="#">Smash Gourmet</a>
</div>
</div>
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#">
Food
</a>
</li>
<li>
<a href="#">
Drinks
</a>
</li>
<li>
<a href="#">
Recipes
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#pablo">
<i class="fa fa-facebook-square"></i>
</a>
</li>
<li>
<a href="#pablo">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="#pablo">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- End Navbar Info -->
<body>
<css-carousel></css-carousel>
</body>
所有其他文件均根据 Angular 2 快速入门设置的默认设置进行设置。我还设法让轮播作为一个独立的组件独立运行我在尝试将它与导航集成时遇到了问题。
最佳答案
已解决:通过 CSS 后，轮播的宽度太小，无法在包装类中显示。
关于css - Angular 2轮播不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38599314/