Skip to content

Latest commit

 

History

History
175 lines (130 loc) · 5.52 KB

README.md

File metadata and controls

175 lines (130 loc) · 5.52 KB

InstSlider

📝 Table of Contents

🧐 About

InstSlider is an easy and fast Instagram style slider.

Live demo

🏁 Installing

To start working with a project, you need to do:

git clone https://github.com/Blackgard/InstSlider.git

🎈 Usage

You will find the files necessary for work in the dist folder.

STEP 1: In header site include:

<head>
    ...
    <link href="instSlider.css" rel="stylesheet">
</head>

STEP 2: before closing the tag body include:

<body>
    ...
    <script defer="defer" src="instSlider.js"></script>
</body>

STEP 3: init slider:

<script>
    document.addEventListener("DOMContentLoaded", () => { 
        var slider_1 = new InstSlider({
            sliders: ['slider-inst-1', 'slider-inst-2', 'slider-inst-3', 'slider-inst-4'] 
        });
    });
</script>

🔥 Success, your slider is work!

📖 How work

How to declare a slider container ?

<div class="history" data-slider-history-id-on-click='slider-inst-1'>
    <div class="border-img" data-slide-border>
        <svg viewBox="0 0 80 80" width="64" height="64" stroke="#5B51D8" stroke-width="3" fill="none">
            <circle class="circle" cx="40" cy="40" r="38" />
        </svg>
    </div>

    <div
        class='history__img' 
        style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 32.81%, rgba(0, 0, 0, 0.02) 100%), linear-gradient(180deg, #FFE8A5 0%, #FFE494 100%);"
        data-slide-img
    >
        AD
    </div>

    <span class='history__title' data-slide-title>
        Alexandr Drachenin (text)
    </span>
</div>

The most important thing is to specify the "data-slider-history-id-on-click" attribute for the container with the slider id value.

Also for digital display of styles, you need to specify tags with "data-slide-img", "data-slide-title" and "data-slide-border".

  1. data-slide-img: Indicates the image that will appear on the slider under the views bar. If you want a picture, then instead of the "div" tag put "img".
  2. data-slide-title: Indicates the text that will appear on the slider under the views bar. To the right of the picture.
  3. data-slide-border: It is used to indicate the viewed users of the sliders.

How to declare a slider ?

<div class="slider-container" id="slider-container">
    <div class="slider-items">
        <div class="slider-inst popur" id='slider-inst-1'>
            <div class="slide-items" data-slide-items-container>
                <div style="background-color: beige;" alt="1" class="item text big" data-slide-item data-slide-item-type="text">
                    Slide 1-1
                </div>
                <div style="background-color: brown;" alt="2" class="item text big white" data-slide-item data-slide-item-type="text">
                    Slide 1-2
                </div>
                <div style="background-color: coral;" alt="3" class="item text big" data-slide-item data-slide-item-type="text">
                    Slide 1-3
                </div>
            </div>
        </div>
    </div>
    <div class="bg-modal black">
        <svg class="icon-close" aria-label="Закрыть" fill="#ffffff" height="24" role="img"></svg>
    </div>
</div>

If you want to create many sliders, then all of them need to be placed in a container with the "slider-container" class.

To tell the slider where the slides will be located, you need to set the date attribute "data-slide-items-container" to it.

Next, for each slide, you need to specify the date attribute "data-slide-item". It will point the slider to a specific slide. You can also specify the type of slide for each slide, by default it is "data-slide-item-type='text'".

Other type slider:

  1. Text (text): use only text without tags.
  2. Video (video): use html tag video.
  3. Image (image): use html tag img.
  4. Html (html): use any tags.

How init slider ?

<script>
document.addEventListener("DOMContentLoaded", () => { 
    var slider_1 = new InstSlider({ 
        loop: false, 
        debug: false, 
        sliders: ['slider-inst-1', 'slider-inst-2', 'slider-inst-3', 'slider-inst-4'] 
    });
});
</script>

When initializing the slider, you can transfer some settings to it, for now there are not so many of them.

Slider settings:

  • loop: is If true, then the slider will be looped.
  • debug: If true, then the slider will display additional information about the work. Needed to debug the slider.
  • sliders: Accepts an array with string values ​​or objects. Indicates which slides will work in conjunction with the created slider.

⛏️ Built Using

✍️ Authors