Carousel represents a banner web component which displays images or slides with HTML content.

To initialize a Carousel Web Component the user has to include the following files to the head of the page:

  • smart.default.css - the CSS file containing the styles for element
  • smart.element.js - the base class
  • smart.elements.js - the JS file containing all elements

The following code adds a simple carousel to the page.

<!DOCTYPE html>
<html lang="en">
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.elements.js"></script> <script> window.onload = function () { const basePath = '../../images/', carousel = document.querySelector('smart-carousel'); carousel.dataSource = generateDataSource(6); function generateDataSource(items) { const dataSource = Array(items).fill({}); dataSource.forEach((element, index) => dataSource[index] = { image: `${basePath}carousel-medium-${index + 1}.jpg`, label: 'Slide ' + index, content: 'Content ' + index }); return dataSource; } } </script> </head> <body> <smart-carousel></smart-carousel> </body> </html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.