javascript - 如何使用 Angular 6+ 激活 Igx 轮播的触摸滑块

问题描述

如何使用 Angular 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, 0.575, 0.565, 1.000) both;
        animation: fade-in .3s cubic-bezier(0.390, 0.575, 0.565, 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);
        }
    }

标签： javascripttypescriptangular6angular9

javascript - 如何使用 Angular 6+ 激活 Igx 轮播的触摸滑块

问题描述

解决方案

推荐阅读