HTML Elements Forums Framework Using as web component

This topic contains 1 reply, has 2 voices, and was last updated by  admin 3 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #99858

    brunetton
    Participant

    Hi,

    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 dependency

    What 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.

    Thanks

    #99860

    admin
    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

    • This reply was modified 3 months, 2 weeks ago by  admin.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.