InstSlider is an easy and fast Instagram style slider.
To start working with a project, you need to do:
git clone https://github.com/Blackgard/InstSlider.git
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!
<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".
- 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".
- data-slide-title: Indicates the text that will appear on the slider under the views bar. To the right of the picture.
- data-slide-border: It is used to indicate the viewed users of the sliders.
<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:
- Text (text): use only text without tags.
- Video (video): use html tag video.
- Image (image): use html tag img.
- Html (html): use any tags.
<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.
- NodeJs - Server Environment
- @Blackgard - Idea & Initial work