0

私のカルーセルコンポーネントが配置されている理由を理解できないようですが、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;
}

my 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 クイックスタート セットアップのデフォルトに従ってセットアップされます。また、カルーセルを独立したコンポーネントとして単独で実行することもできました。ナビと統合しようとすると問題が発生します。

4

1 に答える 1

0

解決済み: CSS を通過した後、カルーセルの幅が小さすぎて、ラッパー クラス内に表示できませんでした。

于 2016-07-26T22:32:38.730 に答える