Stories-FS
Package that adds "instagram stories" to your site
With Stories-FS, you can create professional-quality visual content.
How install?
- npm i stories-fs
- Add files:
HEAD - stories-fs-style.css
Scripts - stories-fs.js - Init
new StoriesFs(".stories-fs", {
slidesPerView: {
320: {
count: 4,
},
960: {
count: 6,
},
1280: {
count: 12,
},
},
});Example HTML:
<div class="stories-fs">
<div class="stories-fs__wrapper">
<div class="stories-fs__track">
<div class="stories-fs__slide">
<div class="stories-fs__preview">
<img src="./images/1.jpg" alt="" />
</div>
<div class="stories-fs__sub-wrapper">
<div class="stories-fs__inner">
<img src="./images/1.jpg" alt="" />
</div>
<div class="stories-fs__inner">
<img src="./images/2.jpg" alt="" />
</div>
<div class="stories-fs__inner">
<img src="./images/3.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>Parameters
| Name | type | Default | Value | Description |
|---|---|---|---|---|
| slidesPerView | object | - | - | The number of slides at a given screen resolution |
| navigation | object | false | elBtnPrev | elBtnNext | Replacement of default slider control buttons |
| swipeOnSlide | boolean | true | true | false | Add the ability to switch slides by swipe on the slide |
| autoPlayFullScreen | boolean | false | true | false | Toggles the slide when completing the item count |
| storiesMode | boolean | true | true | false | If false the progress bar is hidden |
| aspectRatioPreview | boolean | true | true | false | Aspect-ratio for preview off |
| speedStory | number | 3000 | - | Viewing time of one story |
| speedAnimNextSlide | number | 32 | - | Speed animation next slide. low value = high speed scroll |