You are viewing version 3 of the library, the latest version is
<!--Carousel Wrapper-->
<div id="carousel-example" class="carousel slide carousel-fade" data-ride="carousel">
    <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">
                <span class="mdi mdi-pause" aria-hidden="true"></span>
                <span class="sr-only">Pauzeer slideshow</span>
            <button type="button" class="carousel-control-play" aria-hidden="true" style="display: none;">
                <span class="mdi mdi-play play" aria-hidden="true"></span>
                <span class="sr-only">Speel slideshow af</span>
    <ul class="carousel-inner">
        <!--First slide-->
        <li class="carousel-item active">
            <img src="" alt="Eerste slide">
        <!--/First slide-->
        <!--Second slide-->
        <li class="carousel-item">
            <img src="" alt="Tweede slide">
        <!--/Second slide-->
        <!--Third slide-->
        <li class="carousel-item">
            <img src="" alt="Derde slide">
        <!--/Third slide-->
    <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 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>

Based on the version from MDB:

With custom play/pause addition.


Regarding the alt attribute on the images, please follow the decision tree as can be seen here


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.

    var carousel = new nijmegen.Carousel();
    $('document').ready(function () {


  • 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”* (