Skip to Main Content

Overview

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.

The source of the slider is a SQL query which must contain a "URL" or "BLOB" column; this will be used as the source(/path) of the images. When using the URL source type, it is the only column which is mandatory, the other columns are only necessary if the "Description Box" option is enabled.

Please make sure to alias these additional columns correctly as shown in the example query on the right.

    
        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
    

Examples

Basic slider with fullscreen mode

This is a basic slider setup with one image per region, navigation and pagination and enabled support for fullscreen mode.
Looping is enabled which means the slideshow will never reach its end: the first image will automatically slide in after the very last one.

Coverflow slider

There are 4 different options for transitions (slide, cube, coverflow and flip) based on the Images per Region setting. This slider uses 3 images per region and the Coverflow transition. Looping is enabled to be able to center the first and the last image (otherwise they would stay to the left and to the right of the slider).

Slider with autoplay and split-view

To raise more awareness to your content, you can enable automatic changing of the slides with a time-interval of your choosing. This slider's interval is set to 7 seconds, it shows 4 images per region and the looping of the slides is enabled.

Thumbs Gallery

Checking the Display Thumbnails option creates a container below the main slider with a small preview of every slide. The thumbnails can be moved independently on the slider and clicking the thumbnail displays the image in the "main" slider.
5 thumbnails are displayed by default, you can customize this number by passing e.g. options.thumbnails = 10 through the Initialization JavaScript Code. This example does exactly that and sets 6 thumbnails.

Description Box Example

You can display an additional content box for your slides as shown in this example by checking the Description Box option.

If you are not satisfied with the appearance of the box, you can customize it with some CSS. These are the classes used by 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

Real world example

Design

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.

Credits

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

FAQ

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

    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;         
      }