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: Kazuo ota
• Moraine Lake - author: David McLenachan
• Lake Tahoe - author: Waldo Broodryk
• 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

• Why does my image slider seem empty / doesn't show anything?

  ---

  UC
  Please make sure that Template → Appearance is set to "Blank with Attributes" and not to "Standard".

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

  ---

  UC
  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:

  • uc-image-slider-box - the main element of the whole box
  • uc-image-slider-box-header - the header containing the title and the subtitle
  • uc-image-slider-box-title - the title of the box
  • uc-image-slider-box-subtitle - the subtitle appearing below the title
  • uc-image-slider-box-text - the container wrapping the description text
  • uc-image-slider-box-footer - the footer of the box, currently wrapping the button only
  • uc-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 .uc-image-slider-box:

     .uc-image-slider-box {
         top: auto; /* unset uc style which centers the box vertically */
         bottom: 20px;
         left: 50%; /* center horizontally step 1 */
         transform: translateX(-50%); /* unset uc style which centers vertically, instead center horizontally step 2 */
         background-color: transparent; /* unset uc 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;         
     }
             

• How can I get the currently active image?

  ---

  UC
  You can get the index of the currently active image with this JavaScript snippet. Use an order by in your query to then trace it back to your row. Beware the index is 0 based.

  let slider = apex.region('REGION_ID').getGallerySlider();
  let currentlyActive = slider.slides[slider.activeIndex];
  // <div class="swiper-slide swiper-lazy swiper-lazy-loaded swiper-slide-active" data-swiper-slide-index="2" role="group" aria-label="4 / 16" style="width: 800px; background-size: cover; background-image: url(&quot;https://images.unsplash.com/photo-1618906799848-70d730347d58?q=80&amp;w=1920&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&quot;);">
  </div>
  
  currentlyActive.dataset.swiperSlideIndex
  // 2
  

  For local images (fed from a BLOB column not by an image URL) you can also access the ID of the current image by using:

  currentlyActive.dataset.id