<!--Carousel Wrapper-->
<div id="carousel-example" class="carousel slide carousel-fade" data-ride="carousel">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example" data-slide-to="1"></li>
        <li data-target="#carousel-example" data-slide-to="2"></li>
        <li class="carousel-play-pause">
            <button type="button" class="carousel-control-pause">
                <i class="mdi mdi-pause" aria-hidden="true"></i>
                <span class="sr-only">Pauzeer slideshow</span>
            </button>
            <button type="button" class="carousel-control-play" aria-hidden="true" style="display: none;">
                <i class="mdi mdi-play play" aria-hidden="true"></i>
                <span class="sr-only">Speel slideshow af</span>
            </button>
        </li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner">
        <!--First slide-->
        <div class="carousel-item active">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(18).jpg" alt="Eerste slide">
        </div>
        <!--/First slide-->
        <!--Second slide-->
        <div class="carousel-item">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg" alt="Tweede slide">
        </div>
        <!--/Second slide-->
        <!--Third slide-->
        <div class="carousel-item">
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(20).jpg" alt="Derde slide">
        </div>
        <!--/Third slide-->
    </div>
    <!--/.Slides-->
    <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Vorige slide</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Volgende slide</span>
    </a>
</div>

Based on the version from MDB:
https://mdbootstrap.com/javascript/carousel/

With custom play/pause addition.

Accessibility

Regarding the alt attribute on the images, please follow the decision tree as can be seen here https://www.w3.org/WAI/tutorials/images/decision-tree/

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example with the play/pause addition and should be placed in the Additional component(s) script section as documented in How to use.

<script>
    // Set the carousel options
    var carouselElm = $('.carousel');
    carouselElm.carousel({
        interval: 2000
    });

    // Custom JavaScript for the play/pause functionality
    $('.carousel-play-pause').on('click', 'button', function() {
        $(this).hide();
        if (this.classList.contains('carousel-control-play')) {
            carouselElm.carousel('cycle');
            this.setAttribute('aria-hidden', 'true');
            $(this).parent().find('.carousel-control-pause')
                    .attr('aria-hidden', 'false')
                    .show();
        } else {
            carouselElm.carousel('pause');
            this.setAttribute('aria-hidden', 'true');
            $(this).parent().find('.carousel-control-play')
                    .attr('aria-hidden', 'false')
                    .show();
        }
    });
</script>

Notes

  • MDB carousel by default starts sliding through the available slides, therefor a play/pause functionality has been added on top of the component to comply to the first bullet point in “What makes a carousel accessible” (https://www.w3.org/WAI/tutorials/carousels/)