Creating Carousel Navigation
Are you looking to create engaging navigations and carousels in KappaX? With the help of custom attributes and logic blocks, you can easily achieve it without any coding. In this article, you’ll learn the steps to create carousel navigation using custom attributes in KappaX.
Prepare the Carousel Layout
First, you need to prepare the layout for the carousel. Create a group element and add five different images to it. Additionally, add a next and previous button for navigation.
Define Custom Attributes
To keep track of the current image, you need to add a custom attribute of the 'Number' type. This attribute's value will change as per the current image being displayed. For example, if the first image is shown, the attribute's value will be 1. Similarly, for the second image, the value will be 2, and so on.
Implementing Logic for Navigation
To show and hide images based on the custom attribute's value, you need to create rules in the logic block.
Select the 'Next' button and switch to the logic panel. Under the click event, add a new logic block. In the rules section, check 'Is navigation equal to 1'. Then in action, set its value to 2, show the second donut image, and hide the first one.
Next, add a new block and check the value of the custom attribute again. If its value is equal to 2, set it to 3, show the third donut image, hide the second image, and so on write the logic for the rest of the images.
Similarly, for the Previous button, check the attribute's value in reverse order, i.e., check 'Is navigation equal to 2'. Then in action, set its value to 1, show the first donut image, and hide the second one. Add a new block and check the value again. If it is equal to 3, set it to 2, show the second donut image, and hide the third one.
If the actions you want to perform are different based on different rules then, a new block should be added. In case, you want to execute similar actions based on different rules, you can use the ‘OR’ condition in the rule section.
After writing the logic, switch to the preview mode to check the carousel's navigation. If everything is working fine, congratulations, you have successfully created a carousel navigation using custom attributes in KappaX.