Skip to content

Alekseevich-psk/storiesForSite

Repository files navigation

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