With the release of Uncode 2.9.0, we've introduced enhanced navigation options for Carousels and Content Sliders. The update includes the new Carousel/Slider Navigation module that allows for independent management of navigation elements. This flexibility helps you achieve the ideal layout and functionalities for your website’s needs. This module is designed to make navigation intuitive and seamlessly integrate with your overall website design, enhancing both functionality and aesthetic appeal.

The Navigation module consists of three components that can be combined with each other according to different options:

• Arrows: these can have different layouts and icons, can have textual content and offer the primary functionality for the navigation of the Carousel/Slide;
• Dots: these can have different layouts, such as dots, lines, or numbers with different visual styles, and provide a visual cue for pagination positioning;
• Counter: with different typographic styles and layout variations provide a numerical indication of the pagination position of the Carousel/Slider.

It's important to note that the options specified in individual tabs take precedence over those in the General tab. For example, if a Skin or a Position is defined in one of the Arrows, Dots, or Counter tabs, it will take priority for that component over the same option in the General tab.

A stand-alone module

To enhance flexibility, we have developed a stand-alone Navigation module rather than embedding navigation options within the Posts Module, Media Gallery, and Content Slider modules. This approach offers greater design freedom because it allows you to place the Navigation element in different positions (in a different Column, in another Row, or simply provide it with independent alignment). In this example, the navigation module is positioned next to the title in a separate column above the Carousel module, screenshot .

Relative and Absolute positions

To understand the functionality and flexibility of this module, it is crucial to comprehend the distinction between the Relative and Absolute positioning of elements.

Relative

By default, the Navigation module and the Navigation components are positioned Relative, meaning that elements like Arrows, Dots, and Counters are located within the same container. This container should be considered a single element occupying physical space in the layout flow (termed Relative positioning in technical terms), screenshot .

Absolute

In the General tab and within each tab, there is the option for Absolute positioning. Absolute positioning detaches the specified element from the others and from the layout flow. This means that elements such as Arrows, Dots, or the Counter with Absolute positioning can be positioned over the Carousel. Enabling Absolute positioning introduces specific options for vertical alignment, screenshot .

Components and Tabs

The Carousel/Slider Navigation module is divided into seven main tabs that organize the various options available of the different components:

General

The options in this tab include the Target option, which is used to link the module to a specific Carousel/Content Slider, and present the general module options. Options applied here affect the container of all elements (Arrows, Dots, and Counter) as long as they have Relative positioning. Please understand the Carousel/Slider Navigation module as a single element until the internal elements' positioning changes from Relative to Absolute.

Arrows

The options in this tab define the visibility of the Arrows and all related options. Key options include Skin, Position, Width, Vertical alignment, visual style, icons, text association, various animation options, and responsive visibility.

Dots

The options in this tab define the visibility and options of the Dots component. Key options include Skin, Position, alignments, visual style, animation options, and responsive visibility. It's important to note that Dots always refer to the number of slides in the Carousel, not the total number of elements. For example, if three elements are shown at a time in the Carousel, they are counted as a single Dot. Therefore, a Carousel with nine elements, paginated by three elements per view, will show three Dots. The Dots represent the pagination of elements in the 'Owl Carousel'.

Counter

The options in this tab define the visibility and additional options of the Counter. Key options include Skin, Position, width, Vertical alignment, specific options such as min-width, double digits, various animation options, and responsive visibility.

Typography

The options in this tab define the typography of the typographic elements within the module. Components where typography can be defined include the Counter and any Prev and Next texts associated with navigation Arrows.

Animation

The options in this tab define the entrance animation for the module container. Note that this animation applies only to the module's entrance and is different from the hover animation options for individual elements ('On Hover' animation).

Extra

Define possible classes and IDs here for further customization.

Posts/Media Gallery and Content Slider Navigations

From this update, the navigation options of the Posts Module, Media Gallery, and Content Slider can be completely deactivated with one single click. This can be useful for maintaining an internal order of options. For example, if you do not use the default Navigation, we recommend deactivating it. Note that it is possible to use both the default Navigation and the new Navigation module simultaneously if, for instance, you wish to keep the default dots but use specific options from the Navigation module for the arrows. Please note that to hide the module options, you need to select the Advanced Navigation option.

Targeting

Please note that if you have a Carousel/Slider and you insert a Navigation module in the same Row, it will automatically connect to the Carousel/Slider in that Row.

If you're using a structure where the Navigation module is placed in a different Row/Column from that of the Carousel/Slider, you can use the Target option to connect your Carousel/Slider with the Navigation module manually:

1. Open the Posts or Media Gallery module, activate the Advanced Navigation option in the Module tab, and copy the Carousel Target, screenshot ; If you're using a Content Slider, a similar option is provided in the General tab, screenshot ;
2. Open the Navigation module and paste the unique ID of the Target, screenshot .

Create a custom Navigation

By following these steps, you can easily create a simple custom navigation for both Carousel and Content Slider modules in your Uncode-powered website.

Carousel

1. Start by inserting a Row;
2. Within the Row, insert a Posts or Media Gallery module with the Carousel layout, screenshot ;
3. In the same Row, insert a Navigation module to provide navigation controls for the Carousel, screenshot ;
4. Customize the options of the Navigation module according to your preferences, screenshot ;

Content Slider

1. Either create a new Content Slider or import one using the Wireframes plugin;
2. Once your Content Slider is ready, insert a Navigation module within the container column of the Content Slider, screenshot ;
3. Adjust the module options to suit your design and functional requirements, screenshot ;

Wireframes Plugin

Inside the Wireframes plugin, some basic preset combinations of the Navigation module have been created, which can be found in the dedicated category Carousel/Slider Nav, screenshot ;

PS: If you import the Wireframes via the Frontend Editor, please save and refresh the page after the import so that the Navigation can connect with the Carousel of the same Row/Column.