nekoslider v3.0.2

NekoSlider

A simple left to right(or right to left slider, optional). This slider is pure js code. You can see a demo Here: demo. The npm link: NekoSlider

How To Use

You can install it via npm:

npm install nekoslider

Import the package:

import nekoslider from 'nekoslider'

Create an instance of it:

//⪻ ⪼
const neko = new NekoSlider({
  el: document.querySelector("#slider1"),
  slideClass: "slide",
  loopTime: 6000,
  direction: "right",
  rightNavIcon: "❯",
  leftNavIcon: "❮",
  transitionTime: 1000,
  transitionStyle: "ease-in-out",
})

• el: slider container
• slideClass: slide tags class

• direction: 'left or right'
• loopTime: ms, if not given auto play is false
• leftNavIcon
• rightNavIcon
• transitionTime : in ms from 100 to 10000
• transitionStyle : linear, ease-out, ease-in, ease-out-in

<div class="slider-container" id="slider2" style="width: 90%; border-radius: unset; margin-bottom: 30px">
  <div class="slide"><img src="./media/pic(5).png" onerror="this.onerror=null; this.src=''" alt="" /></div>
  <div class="slide"><img src="./media/pic(6).jpg" onerror="this.onerror=null; this.src=''" alt="" /></div>
  <div class="slide"><img src="./media/pic(7).jpg" onerror="this.onerror=null; this.src=''" alt="" /></div>
  <div class="slide"><img src="./media/pic(8).jpg" onerror="this.onerror=null; this.src=''" alt="" /></div>
</div>

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

NekoSlider/
├── src/
│   └── index.js
│   └── slider.js
├──css
│   └── css.css
└── index.html