Reply To: Carousel as input data - Smart UI Components

May 12, 2021 at 4:32 pm #101799

Member

Hi Tullio,
I have made yet another code snippet for you which demonstrates how to achieve this functionality.
In your JS file:

    let carouselItems = document.querySelectorAll('.smart-carousel-item-container'),
        carouselIndicator  = document.querySelectorAll('.smart-indicator');
    carousel.addEventListener ('click', ()=>{
        for (let i= 0; i <carouselItems.length; i ++){
            if(carouselIndicator[i].ariaSelected == 'true'){
                console.log(carouselItems[i].style.backgroundImage)
            }
        }
    })

This will give you the url of the background-image of the currently selected carousel.
In your HTML file:

<body>
    <smart-carousel  slide-show interval="2000" loop></smart-carousel>
	<!-- scripts -->
    <script type="module" src="../../../source/modules/smart.carousel.js"></script>
    <script type="module" src="index.js"></script>
</body>

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/