Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blackgard/instslider
Simple and fast Instagram style slider
https://github.com/blackgard/instslider
carousel html instagram instagram-slider javascript js-native slide slider slideshow
Last synced: about 1 month ago
JSON representation
Simple and fast Instagram style slider
- Host: GitHub
- URL: https://github.com/blackgard/instslider
- Owner: Blackgard
- License: mit
- Created: 2021-08-24T07:27:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-08T06:29:46.000Z (almost 2 years ago)
- Last Synced: 2024-02-04T08:24:03.021Z (11 months ago)
- Topics: carousel, html, instagram, instagram-slider, javascript, js-native, slide, slider, slideshow
- Language: TypeScript
- Homepage:
- Size: 50.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
InstSlider
[]()
[](/LICENSE)
[Live demo](https://blackgard.github.io/InstSlider/)
---
## 📝 Table of Contents
- [About](#about)
- [Installing](#getting_started)
- [Usage](#usage)
- [How work](#how_work)
- [Built Using](#built_using)
- [Authors](#authors)
InstSlider is an easy and fast Instagram style slider.
[Live demo](https://blackgard.github.io/InstSlider/)
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](/dist) folder.
STEP 1: In header site include:
```html
...
```
STEP 2: before closing the tag body include:
```html
...
```
STEP 3: init slider:
```html
document.addEventListener("DOMContentLoaded", () => {
var slider_1 = new InstSlider({
sliders: ['slider-inst-1', 'slider-inst-2', 'slider-inst-3', 'slider-inst-4']
});
});
```
🔥 Success, your slider is work!
### How to declare a slider container ?
```html
AD
Alexandr Drachenin (text)
```
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 ?
```html
```
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 ?
```html
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']
});
});
```
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](https://nodejs.org/en/) - Server Environment
- [@Blackgard](https://github.com/Blackgard) - Idea & Initial work