Slideshow Element

Bring some life into your content.

Overview

With Slideshows, also called carousels, you can animate your content in a nice interactive way. Mame's slideshow is not only for images, but you can add any content you like. Additionally you can also combine background images and HTML.


Usage Examples

  • Present products or goods.
  • Product and Services Presentations.
  • Image 
  • ...

Slideshow Properties

  1. Style: Set the style of the slideshow. This affects both the navigation and the slide effect and transition.
  2. Slideshow Speed: How long should each slide  
  3. Autoplay: Should the slideshow automatically play once the page is loaded. (Default false)
  4. Show Controls: Should the user be able to navigate between the different slides with arrow buttons on the left and right. (See 1)
  5. Show Navigation: Show the slideshow navigation buttons at the bottom of the slideshow (the dots).
Single Slide Properties 
  1. Identifier: Internal identifier that makes it easier to find the right slide.
  2. Background: Set a background for the slide (optional). You can choose between colors, images, videos, patterns and more.
  3. Content and Elements are added directly to the slide.
Everything else is configured with the common properties. 
Slideshow properties description

See it in action

A simple Slide

With formatted HTML Text

Start creating your awesome 
website today.
Start building

Slide with a gradient background

Interactions and Accessibility

Users can navigate the slides by navigating between the previous and next button using Tab and open them by pressing Enter. 

Generated HTML


<div class="mame-element mame-slideshow" style="..">
   <div class="slideshow__slide animate-slide-...">
        <div class="slideshow__inner" style="...">
           ...
        </div>
   </div>
   <div class="slideshow__left" style="...">
     ...
   </div>
   <div class="slideshow__right" style="...">
     ...
   </div>
</div>

Style / CSS Selectors


.mame-slideshow {
  /* All slideshow elements */
}

.slideshow_slide {
  /* Styling of the slide */
} 

.slideshow__inner {
  /* Inner content of the slide */
}

.slideshow__left {
  /* The previous navigation */
}

.slideshow__right{
  /* The previous navigation */
}


JavaScript

Slideshows need Mame's JavaScript in order to function properly.

Was this article helpful?