Package Exports

nekoslider
nekoslider/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nekoslider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple right to left Slider
NekoSlider

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: "&#10095;",
  leftNavIcon: "&#10094;",
  transitionTime: 1000,
  transitionStyle: "ease-in-out",
})

Properties:

Requirements:

el: slider container
slideClass: slide tags class

Optional:

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

HTML format

You should provide your container as a javascript dom element.

You can name your single slide class what you want but you need to provide the name

<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

nekoslider