1.0.1 • Published 2 months ago
noobslider-app v1.0.1
Noobslider
It's simple slider for photo. Nothing something else.
Install
Write in console:
npm i noobslider
Import .css file and .js script in your HTML
<link rel="stylesheet" href="./node_modules/noobslider/css/slider.css" />
<script src="./node_modules/noobslider/src/app/app.js"></script>
Usage
Import script file to your js file
import Slider from "./node_modules/noobslider/src/app/app.js";
Make sure your HTML should be like this:
<div class="swiper">
<div class="wrapper">
<div class="photo slide">
Your photo
</div>
<div class="photo slide">
Your photo
</div>
<div class="photo slide">
Your photo
</div>
<div class="photo slide">
Your photo
</div>
</div>
</div>
You can use any name of anything, but for slides you need add "slide" class.
Then init slide:
const main = document.querySelector(".swiper");
const wrapper = document.querySelector(".wrapper");
const slides = document.querySelector(".photo");
const res = new Slider(main, wrapper, slides, {
indicator: {
dots: true,
number: false,
},
arrow: true,
});
res.initSlide();
Customization
Slider has customization. Here settings:
new Slider(main, wrapper, slides, {
indicator: {
dots: true, // If you need dots indicator
number: true, // If you need number of active slide
border:true, // If you need border for dots indicator
size: medium, // If you need change size of dots. Here 3 variants: medium, long, line
},
arrow: true, // If you need arrows for next or previous slide
});