itay pro asked 4 years ago

In a carousel, when in the first or last slide, there should be only one arrow because the second does nothing.

How can I show only one arrow ?

Konrad Stępień staff answered 4 years ago

Hi @itay,

This is my way:

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  onActiveSlideChange(event) {
    const prevBtn = document.querySelector('.carousel-control-prev');
    const nextBtn = document.querySelector('.carousel-control-next');

    [prevBtn, nextBtn].map(button => button.classList.remove('d-none'));

    if (event.relatedTarget === 0) {
    } else if(event.relatedTarget === 2) {

and HTML

<mdb-carousel [animation]="'slide'" (activeSlideChange)="onActiveSlideChange($event)">
    <img class="d-block w-100" src="" alt="First slide">
    <img class="d-block w-100" src="" alt="Second slide">
    <img class="d-block w-100" src="" alt="Third slide">

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.2
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No