Stories-FS

Package that adds "instagram stories" to your site

With Stories-FS, you can create professional-quality visual content.

1. Demo page
2. How install?
3. Example
4. Parameters

How install?

1. npm i stories-fs
2. Add files: HEAD - stories-fs-style.css Scripts - stories-fs.js
3. 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 |