The FOS - Image Slider is a region plug-in which displays a gallery of lazily loaded images. It is based on the modern Swiper slider (https://swiperjs.com/) which also supports mobile devices, accelerated transitions and native behavior.

This plug-in offers the most commonly-used features such as autoplaying, looping, thumbnails gallery, different display modes/size for the images and so on. It offers various slide-transition options and a built-in description box which can be easily customized using CSS if necessary.

    
        select url          as  url
             , title        as  title
             , subtitle     as  subtitle
             , description  as  description
             , buttonurl    as  buttonurl
             , buttonlabel  as  buttonlabel
             , 'some-data'  as  data_slide
          from some_table
    

You can preview the plug-in setup as you would see it in page designer. You can either do this by clicking this button in the top right corner of each example, or you can see all the examples together in the region below.

Looking at the examples you'll see just how easy the plug-in is to use. Don't worry about changing any values as they aren't saved. We actually encourage you to change them, so you can see the behaviour of the attributes and their help text.

All the images displayed in the examples of our Image Slider plugin-in are hosted by Unsplash (https://unsplash.com/).

• Hallstatt - author: Dana Andreea
• Pangong Tso - author: Vijit Dutta
• The Lycian Way - author: Nadiya Ploschenko
• Palenque - author: Crisoforo Gaspar Hernandez
• Csobánc - author: Szabina Gerencsér
• Tahiti - author: Vitaly Sacred
• Moraine Lake - author: David McLenachan
• Lake Tahoe - author: Time Peterson
• Sao Beach - author: Marcos Assis
• Plitvice Lakes National Park - author: Ante Hamersmit
• Banff National Park - author: Gabriel Perelman
• Zakynthos - author: Anastasius
• Cabo San Lucas - author: Victoria Bragg
• Punch Bowl Falls - author: Ross Kohl

• How do I change the style and/or use the above-mentioned classes to style the description-box?

  ---

  FOS
  The description-box is a wrapper element (using a flex-layout) around a few other elements - the headers, text, and the footer containing the button. You will need a tiny bit of CSS knowledge to modify it:
  We recommend right-clicking the description-box or any of its content and selecting "Inspect Element" (or alike) from the context menu. This should open the developer tools of your browser and the element you clicked should be focused in the node tree. There you can check node by node which styles are applied and which you want to override.

  To override a CSS style just include it in your own CSS file, or on your page. Make sure you are declaring your rules either after the slider's CSS file or you are using higher specificity selectors. As mentioned above, these are the classes used to format the box:

  • fos-image-slider-box - the main element of the whole box
  • fos-image-slider-box-header - the header containing the title and the subtitle
  • fos-image-slider-box-title - the title of the box
  • fos-image-slider-box-subtitle - the subtitle appearing below the title
  • fos-image-slider-box-text - the container wrapping the description text
  • fos-image-slider-box-footer - the footer of the box, currently wrapping the button only
  • fos-image-slider-box-button - the button in the footer

  Let's assume a simple example - you would like to create subtitle-like captions for your slides:

  1. return null in your query for buttonurl, title and subtitle - this will cause that these nodes will not be rendered
  2. we will style the .fos-image-slider-box:

     .fos-image-slider-box {
         top: auto; /* unset fos style which centers the box vertically */
         bottom: 20px;
         left: 50%; /* center horizontally step 1 */
         transform: translateX(-50%); /* unset fos style which centers vertically, instead center horizontally step 2 */
         background-color: transparent; /* unset fos style white background */
         color: white; /* font color */
         font-weight: bold;
         font-size: 16px;
         text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); /* add text shadow so the white letters don't lose on a light image */
         text-align: center;         
     }