Skip to Main Content

Breadcrumb

Upgrading from v23.1 or older

As of v24.1 the internal name of this plug-in is UNITEDCODES_IMAGE_SLIDER. Up to and including v23.1 it was UC_IMAGE_SLIDER.

APEX identifies a plug-in by its internal name, so a new version does not replace an older installation:

  • On APEX 26.1 and later the import stops with ORA-00001: unique constraint (APEX_260100.WWV_FLOW_PLUGIN_APEXLANG_UK) violated. Nothing is installed and nothing in your application is changed.
  • On APEX 24.2 and earlier the import adds a second plug-in instead of replacing the old one. Both are listed as UC - Image Slider, and your existing regions keep using the old version.

Two kinds of component reference the plug-in and both have to be migrated: every region of type UC - Image Slider, and every dynamic action on one of the plug-in events (Fullscreen Enter, Fullscreen Exit, Slide Change, Slide Click).

There are three ways to upgrade, described in UPGRADE.md in the download:

  • Delete and set the region type again - remove the old UC - Image Slider plug-in (internal name UC_IMAGE_SLIDER), import the new version, then set the region type back to UC - Image Slider on every region that used it and re-select the event on every dynamic action that listened to it. Those pages do not render between the delete and the re-select.
  • Rename inside an application export - export the application, replace UC_IMAGE_SLIDER with UNITEDCODES_IMAGE_SLIDER, import it back. No region and no dynamic action has to be edited, which makes this the option to pick when an application contains many of them.
  • Run both versions side by side - keep the old plug-in under a different name while you move regions over one at a time.

Whichever you choose, it is a one-time step: all later upgrades install over the previous version normally.

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:

  • 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
Hallstatt

Hallstatt is at the core of the "Hallstatt-Dachstein/Salzkammergut Cultural Landscape" declared as one of the World Heritage Sites in Austria by UNESCO in 1997. It is an area of overtourism.

Learn More
Pangong Tso

The lake acts as an important breeding ground for a variety of birds including a number of migratory birds. During summer, the Bar-headed goose and Brahmini ducks are commonly seen here.

Learn More
The Lycian Way

The region has hot, dry summers and mild winters with low annual rainfall due to the prevailing Mediterranean climate. The hiking season is long; however, the best time is the spring season, when the hills are still snow covered and the landscape is covered with flowers.

Learn More
Palenque

Palenque, also anciently known as Lakamha (literally: "Big Water"), was a Maya city state in southern Mexico that perished in the 7th century. It contains some of the finest architecture, sculpture, roof comb and bas-relief carvings that the Mayas produced.

Learn More
Csobánc

Csobánc is one of the unique and peculiar monadnocks of Tapolca Basin. It is a result of basalt volcanism 3.5 million years ago. Numerous rare habitats in need of protection have been preserved due to the relatively secluded and undisturbed area.

Learn More
Tahiti

Tahiti is the largest island of the Windward group of the Society Islands in French Polynesia, located in the central part of the Pacific Ocean.

Learn More
Moraine Lake

The lake, being glacially fed, does not reach its crest until mid to late June. When it is full, it reflects a distinctive shade of azure blue. The unique colour is due to the refraction of light off the rock flour deposited in the lake on a continual basis by surrounding glaciers.

Learn More
Lake Tahoe

The lake was formed about two million years ago as part of the Lake Tahoe Basin, with the modern extent being shaped during the ice ages. It is known for the clarity of its water and the panorama of surrounding mountains on all sides.

Learn More
Sao Beach

The economy is centred on fishing, agriculture and a fast-growing tourism sector. Phu Quoc has achieved fast economic growth due to its current tourism boom. Many infrastructure projects have been carried out, including several five-star hotels and resorts.

Learn More
Plitvice Lakes National Park

The national park was founded in 1949 and is in the mountainous karst area of central Croatia, at the border to Bosnia and Herzegovina. The important north-south road that passes through the national park area connects the Croatian inland with the Adriatic coastal region.

Learn More
Banff National Park

Canadas oldest national park, established in 1885. Located in Albertas Rocky Mountains, 110-180 kilometres (68-112 mi) west of Calgary, Banff encompasses 6,641 square kilometres (2,564 sq mi) of mountainous terrain, with many glaciers and ice fields, dense coniferous forest, and alpine landscapes.

Learn More
Zakynthos

Zakynthos is a tourist destination, with an international airport served by charter flights from northern Europe. The islands nickname is "the Flower of the Levant", bestowed upon it by the Venetians who were in possession of Zakynthos from 1484 to 1797.

Learn More
Cabo San Lucas

Cabo San Lucas is a resort city at the southern tip of the Baja California Peninsula, in the Mexican state of Baja California Sur. It's known for its beaches, scuba diving locations, Balnearios, the sea arch El Arco de Cabo San Lucas, and marine life. The Los Cabos Corridor has become a heavily trafficked vacation destination for tourists, with numerous resorts and timeshares along the coast between Cabo San Lucas and San José del Cabo.

Learn More
Punch Bowl Falls

Punch Bowl Falls is a waterfall on Eagle Creek in the Columbia River Gorge National Scenic Area, Oregon, United States. Eagle Creek drains into the Columbia River, with its outlet on the Columbia River Gorge in Multnomah County.

Learn More

Real world example

Hallstatt

Pangong Tso

The Lycian Way

Palenque

Csobánc

Tahiti

Moraine Lake

Lake Tahoe

Sao Beach

Plitvice Lakes National Park

Banff National Park

Zakynthos

Cabo San Lucas

Punch Bowl Falls

Credits

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

FAQ

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

    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?

    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?

    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