Reply To: Using as web component - Smart UI Components

June 4, 2019 at 6:30 am #99860

Keymaster

Hi brunetton,
To import a web component in your project, you simply need to import its file. Step by step instructions are below.
After you install smart-carousel, create a new index.htm file:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./node_modules/@smarthtmlelements/smart-core/source/styles/smart.default.css" type="text/css" />
	<style>
		smart-carousel {
			width: 100%;
			height: 600px;
		}
	</style>
    <script type="module">
		import './node_modules/@smarthtmlelements/smart-core/source/smart.core.js';
   </script>
   <script>
     window.onload = function () {
		const carouselSquare = document.getElementById('carouselSquare'); 
		carouselSquare.dataSource = [
			{image: 'https://free-images.com/md/86a4/aroma_aromatic_beverage_bio.jpg'},
			{image: 'https://free-images.com/md/4138/artistic_conception_green_689793.jpg'},
			{image: 'https://free-images.com/md/9947/splashing_splash_aqua_water.jpg'},
			{image: 'https://free-images.com/lg/521e/common_snowdrop_galanthus_nivalis.jpg'},
			{image: 'https://free-images.com/lg/7bf2/snowdrop_blossom_bloom_1025078.jpg'}
		];
	 }
   </script>
</head>
<body>
     <smart-carousel id="carouselSquare" hide-arrows auto-play slide-show loop hide-indicators hide-buttons keyboard display-mode="3d" interval="10000"></smart-carousel>
</body>
</html>

After that, install http-server
npm install http-server -s

Run the http-server with the
http-server command.
The final step is:
In your browser type:
http://localhost:8080/index.htm

Best Wishes,
Peter
Smart HTML Elements
https://www.htmlelements.com