Hi @TejasKu ,
To create click event buttons like "Next" and "Previous" in a carousel component in AEM, you can follow these steps:
In your carousel component's HTL file, add the necessary HTML markup for the carousel and the buttons. For example:
<div class="carousel">
<!-- Carousel content goes here -->
</div>
<button class="carousel-button prev">Previous</button>
<button class="carousel-button next">Next</button>
In the component's JavaScript file, add event listeners to the "Next" and "Previous" buttons to handle the carousel navigation. You can use JavaScript libraries like jQuery or vanilla JavaScript for this. Here's an example using jQuery:
$(document).ready(function() {
$(".carousel-button.next").click(function() {
// Logic to navigate to the next slide in the carousel
});
$(".carousel-button.prev").click(function() {
// Logic to navigate to the previous slide in the carousel
});
});
Implement the logic inside the click event handlers to navigate to the next or previous slide in the carousel. This can vary depending on the carousel library or implementation you are using. You may need to update the carousel's current slide index or use specific methods provided by the carousel library to navigate between slides.
Save and build your project, and then include the carousel component in your page. The "Next" and "Previous" buttons should now trigger the appropriate navigation actions in the carousel.
Note: The implementation details may vary depending on the specific carousel library or component you are using. Make sure to adjust the class names, selectors, and navigation logic according to your carousel implementation.
By following these steps, you can create click event buttons like "Next" and "Previous" in a carousel component in AEM and implement the necessary navigation logic.
