问题描述
如何使用角度6+激活Igx传送带的触摸滑块
实际上,我需要igx轮播来滑动图像,我从stackblitz(https://stackblitz.com/edit/github-j6q6ad?file=src%2Fapp%2Fcarousel%2Fcarousel.component.html)获取了一个参考,它在stackblitz中是完美的,但是在我们的实时环境(Visual Studio Code)中,触摸滑块无法工作,所以请您帮助我激活触摸滑块的图像,并附上我的代码供您参考...。
app.componet.html:
<div class="carousel-container">
<igx-carousel #carousel>
<igx-slide *ngFor="let slide of slides;">
<div class="image-container">
<img [src]="slide.src">
</div>
</igx-slide>
</igx-carousel>
</div>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'SampleCarouselThree';
public slides = [
{
src: "https://www.infragistics.com/angular-demos/assets/images/carousel/ignite-ui-angular-indigo-design.png"
},{
src: "https://www.infragistics.com/angular-demos/assets/images/carousel/slider-image-chart.png"
},{
src: "https://www.infragistics.com/angular-demos/assets/images/carousel/ignite-ui-angular-charts.png"
}
];
}
app.component.scss:
@import '~igniteui-angular/lib/core/styles/themes/index';
.carousel-container{
width: 70vw;
height: 80vh;
margin: 16px auto;
}
:host ::ng-deep{
.image-container{
max-width: 85%;
display: flex;
align-items: center;
justify-content: center;
}
.igx-carousel{
max-width: 100%;
width: unset;
}
.igx-nav-dot{
background: black;
Box-shadow: none;
width: 15px;
height: 15px;
}
.igx-slide{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: unset;
}
.igx-slide img{
object-fit: fill;
max-width: 90%;
}
}
app.module.ts:
import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from "@angular/forms";
import { IgxCarouselModule,IgxSliderModule } from "igniteui-angular";
@NgModule({
declarations: [
AppComponent
],imports: [
browserModule,AppRoutingModule,FormsModule,IgxCarouselModule,IgxSliderModule,browserAnimationsModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule {
}
style.scss:
// CSS Reset,comment out if not required or using a different module
// @import '~minireset.css/minireset';
@import '~igniteui-angular/lib/core/styles/themes/index';
@include igx-core();
@include igx-theme($default-palette,$legacy-support: true);
:root {
@include css-vars-from-palette($default-palette);
}
/* autoprefixer grid: on */
html,body {
height: 100%;
overflow: hidden;
margin: 0;
}
.sample-wrapper {
width: inherit;
position: relative;
height: 100%;
margin: 0 auto;
background: transparent;
}
.sample-content {
display: flex;
flex-grow: 1;
flex-flow: row wrap;
justify-content: flex-start;
padding: 0;
-webkit-animation: fade-in .3s cubic-bezier(0.390,0.575,0.565,1.000) both;
-moz-animation: fade-in .3s cubic-bezier(0.390,1.000) both;
animation: fade-in .3s cubic-bezier(0.390,1.000) both;
}
.sample-column {
display: flex;
flex-flow: column Nowrap;
flex: 1 0 25%;
align-content: flex-start;
margin: 16px;
min-width: 280px;
}
.sample-title {
color: #0375be;
margin-bottom: 12px;
margin-top: 12px;
}
.sample-title .light {
font-weight: 400;
}
.sample-description {
font-size: 14px;
font-weight: normal;
color: #717171;
}
@-webkit-keyframes color-change-2x {
0% {
background: #fdf8f0;
}
100% {
background: #f6e7ec;
}
}
@keyframes color-change-2x {
0% {
background: #fdf8f0;
}
100% {
background: #f6e7ec;
}
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.headerAlignSyle {
text-align: right !important;
}
$green-palette: igx-palette($primary: #09f,$secondary: #72da67,$surface: #333);
.fin-dark-theme {
@include igx-dark-theme($green-palette);
background: #333;
::-moz-placeholder {
opacity: 1;
}
}
.dark-theme {
background: #333;
color: #fff;
@include igx-dark-theme($green-palette,$legacy-support: true);
.grid-chart-contextmenu-wrapper{
@include igx-fluent-dark-theme($fluent-excel-palette);
}
}
解决方法
为手势安装hammerjs
npm install hammerjs
然后在polyfills中添加`hammerjs'
// polyfills.ts
import "hammerjs/hammer";