1.0.0 • Published 3 months ago
insta-story v1.0.0
InstaStory Component
The insta-story
is a custom web component built using LitElement.
See example here
Usage
To use this component, you need to import it in your project and then use the custom HTML tag insta-story
.
Each item in the story is a insta-chapter
element. You can add as many chapters as you want.
<insta-story width="500px" height="800px">
<insta-chapter>
<video
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
></video>
</insta-chapter>
<insta-chapter>
<video
src="https://videos.pond5.com/iceland-drone-waterfall-rainbow-footage-071816011_main_xxl.mp4"
></video>
</insta-chapter>
<insta-chapter>
<video
src="https://videos.pond5.com/kayak-paddler-beneath-icebergs-greenland-footage-096059211_main_xxl.mp4"
></video>
</insta-chapter>
<!-- Add more chapters as needed -->
</insta-story>
Attributes
Attribute | Description | Type | Default |
---|---|---|---|
width | The width of the slider in css unit | string | 'auto' |
height | The height of the slider in css unit. | string | 'auto' |