Carousel

More documentation can be found MDB's site, here .

#carousel-example-1z.carousel.slide.carousel-fade.mb-6.mx-6{ data: { ride: :carousel } }
  %ol.n2-carousel-indicators
    %li.active{ data: { "slide-to" => 0, target: "#carousel-example-1z" } }
    %li{ data: { "slide-to" => 1, target: "#carousel-example-1z" } }
    %li{ data: { "slide-to" => 2, target: "#carousel-example-1z" } }
  .carousel-inner{ role: "listbox" }
    .carousel-item.active= image_tag "https://mdbootstrap.com/img/Photos/Slides/img%20(18).jpg"
    .carousel-item= image_tag "https://mdbootstrap.com/img/Photos/Slides/img%20(19).jpg"
    .carousel-item= image_tag "https://mdbootstrap.com/img/Photos/Slides/img%20(20).jpg"

  %a.carousel-control-prev{ "data-slide" => "prev", href: "#carousel-example-1z", role: "button" }
    %i.carousel-control-prev-icon.material-icons.black-text{ "aria-hidden" => "true" } chevron_left
  %a.carousel-control-next{ "data-slide" => "next", href: "#carousel-example-1z", role: "button" }
    %span.carousel-control-next-icon{ "aria-hidden" => "true" }
    %i.carousel-control-next-icon.material-icons.black-text{ "aria-hidden" => "true" } chevron_right

Just the indicators

# if indicators are on a dark background, add the 'light' class to the
# element that has the 'n2-carousel-indicators' class
.carousel.col-mt-3.mb-6
  %ol.n2-carousel-indicators.mt-3
    %li.cursor-default
    %li.active.cursor-default
    %li.cursor-default