각도 2 캐 러셀이 표시되지 않음

내 캐 러셀 구성 요소가있는 이유는 알 수 없지만 CSS 또는 이미지는 표시되지 않습니다.각도 2 캐 러셀이 표시되지 않음

내 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>

다른 모든 파일은 각도 2 빠른 시작 설정의 기본값에 따라 설정됩니다. 나 또한 컨베이어를 독립적 인 구성 요소로 실행하기 위해 컨베이어를 작동 시켰습니다.이 구성 요소를 Nav와 통합하려고 할 때 문제가 발생했습니다.

출처

2016-07-26 Matt Atwell

회전식 캐어는 순수한 CSS입니까, 아니면 jquery를 사용합니까? – Leukonoe

해결 : CSS를 거친 후 캐 러셀의 너비가 너무 작아서 래퍼 클래스 내에 표시 할 수 없습니다.

출처

2016-07-26 22:32:38

각도 2 캐 러셀이 표시되지 않음

답변

관련 문제