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.

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.

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.

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.