Looking to enable the touch slider for Igx carousel using angular 6+?
I am trying to implement the igx carousel for image sliding with reference from a stackblitz demo (https://stackblitz.com/edit/github-j6q6ad?file=src%2Fapp%2Fcarousel%2Fcarousel.component.html) which works perfectly in stackblitz. However, when I tried to use it in our real-time environment (Visual Studio Code), the touch slider feature did not work as expected. Can someone please guide me on how to activate the touch slider functionality for the images? I have included my code for your reference below...
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 */
etc...