JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Using as web component
Tagged: carousel, import, web components
- This topic has 1 reply, 2 voices, and was last updated 5 years, 3 months ago by
admin.
-
AuthorPosts
-
June 3, 2019 at 9:18 pm #99858
admin
KeymasterHi,
I’m trying to use carousel component as a web component to use inside a Svelte project.
So I installed smart-carousel with npm:npm install @smarthtmlelements/smart-carousel
How can I import the comonent and use it ? I tried :
import {Carousel} from ‘@smarthtmlelements/smart-carousel’;
But module isn’t found:
$ npm run dev
‘@smarthtmlelements/smart-carousel’ is imported by src/routes/index.svelte, but could not be resolved – treating it as an external dependencyWhat am I doing wrong ?
I also tried an empty Node project from scratch that only requires @smarthtmlelements/smart-carousel and use it, but the result is the same.
I maybe missed something in docs, but I do not clearely understand how it’s organized.
ThanksJune 4, 2019 at 6:30 am #99860admin
KeymasterHi 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 -
AuthorPosts
- You must be logged in to reply to this topic.