I’ve checked everywhere with no luck. I’m trying to detect when the carousel changes to a new slide (weather automatically or by user click). I have tried many combinations with no luck. The event just does not fire at all. I’ve used the event handler .on to attach events in the typescript file but they do not fire. I’ve also tried the now deprecated .bind as well and again nothing happens. Using Angular 8.3 Bootstrap 4.4.1
Here is the HTML
<div class="project-container">
<div class="header">
<h2><i class="fas fa-book"></i>Projects</h2>
</div>
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="3"></li>
<li data-target="#carouselIndicators" data-slide-to="4"></li>
<li data-target="#carouselIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" id="project-carousel">
<div *ngFor="let project of projects; let i = index" class="carousel-item">
<div class="project-item">
<div class="container">
<div class="row">
<div class="col left horizontal-scroll-wrapper">
<div class="project-image-container">
<div class="row">
<div *ngFor="let image of project.images">
<div class="col">
<img [src]="image.src">
</div>
</div>
</div>
</div>
</div>
<div class="col right">
<div class="project-details-container">
<h1>{{ project.name }}</h1>
<h3>Language: {{ project.language }}</h3>
<h3>Created: {{ project.date }}</h3>
<p>{{ project.description }}</p>
<a [href]="project.link" target="_blank">{{ project.linkDescription }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
And the typescript
import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
@Component({
selector: 'app-project-portfolio',
templateUrl: './project-portfolio.component.html',
styleUrls: ['./project-portfolio.component.scss']
})
export class ProjectPortfolioComponent implements OnInit {
projects = new Array();
constructor() { }
ngOnInit() {
this.projects = [{....}];
}
ngAfterViewInit() {
document.getElementById("project-carousel").children[0].classList.add("active");
[].map.call(
document.querySelectorAll('.left'),
((slider: HTMLElement) => {
slider.addEventListener('mouseenter', e => {
var x = window.scrollX;
var y = window.scrollY;
window.onscroll = function () { window.scrollTo(x, y); };
});
slider.addEventListener('mouseleave', e => {
window.onscroll = function () { };
});
let scrollDirection;
let scrollAmount = 0;
slider.addEventListener('wheel', (e) => {
scrollDirection = e.deltaY;
if (scrollDirection < 0) {
scrollAmount = slider.scrollWidth / 8;
slider.scrollLeft -= scrollAmount;
} else {
scrollAmount = slider.scrollWidth / 8;
slider.scrollLeft += scrollAmount;
}
});
})
)
}
}
$('#carouselIndicators').on('slide.bs.carousel', function () {
console.log("Slide!"); // This does not fire
})
$('#carouselIndicators').on('slid.bs.carousel', function () {
console.log("Slid!"); // This does not fire
})
Advertisement
Answer
There are a few different ways to do this, but the below works well for me:
First run the below command to add bootstrap carousel environment:
ng add ngx-bootstrap --component carousel
then app.module.ts:
//import CarouselModule at the top and in imports of app.module.ts include CarouselModule
import { CarouselModule } from 'ngx-bootstrap/carousel';
//in imports of app.module.ts include this:
imports: [
BrowserModule,
CarouselModule.forRoot()
],
add the below in app.component.ts
import { Component } from '@angular/core';
import { CarouselConfig } from 'ngx-bootstrap/carousel';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [
{ provide: CarouselConfig, useValue: { interval: 1500, noPause: true, showIndicators: true } }
]
})
export class AppComponent {
title = 'testfunctions';
}
lastly, app component.html file:
<carousel>
<slide>
<img src="image1.jpg" alt="first slide" style="display: block; width: 100%;">
<div class="carousel-caption d-none d-md-block">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</slide>
<slide>
<img src="image2.jpg" alt="second slide" style="display: block; width: 100%;">
<div class="carousel-caption d-none d-md-block">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</slide>
<slide>
<img src="image3.jpg" alt="third slide" style="display: block; width: 100%;">
<div class="carousel-caption d-none d-md-block">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</slide>