Question

似乎无法弄清楚我的轮播组件的位置，但没有显示任何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快速入门设置的默认设置设置所有其他文件。我还设法让旋转木马独立运行作为一个独立的组件我试图将它与导航器集成时遇到了问题。

Answer 1

解决：经过CSS后，轮播的宽度太小，无法在包装类中显示。

Angular 2 Carousel未显示

1 个答案: