1.0.5 • Published 6 months ago

n8t-slider v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago


Installation

npm install n8t-slider

Usage

HTML

⚠️ Add n8t-slider-style.min.css to HTML for correct work ⚠️

<div slider-container>
  <div slider-list>
    <div slider-item>...</div>
    // Another items
  </div>
  <button slider-prev>...</button>
  <button slider-next>...</button>
  <div slider-pagination>// Nothing here</div>
</div>

JS

import N8TSlider from "n8t-slider";

const sliderElement = document.querySelector("[slider-container]");

const slider = new N8TSlider({
  sliderContainer: sliderElement,
});

Documentation

JS

PropertyDescriptionType
sliderContainerElement of container(main) element of slider. RequiredHTMLElement
slidesQntNumber of slides shown. Optional, default oneNumber
animationDurationThe amount of time the animation will play. By seconds. Optional, default 0.3Number
animationEffectThe effect the animation will play with. Optional, default 0.3'ease''ease-in''ease-out''ease-in-out''linear''step-start''step-end'
paginationIs pagination(navigation) shown. Optional, default falseboolean
infinityIs slider scroll is infinity. Optional, default falseboolean
intervalThe value at which time interval the slider will change its contents. By seconds. Optional, default 0Number

HTML

AttributeDescription
slider-containerContainer(main) element of slider
slider-listWrapper to slider-items.
slider-itemSlider item.
slider-prevPrevious slide button.
slider-nextNext slide button.
slider-paginationPagination wrapper. Automatically made children.
1.0.5

6 months ago

1.0.4

6 months ago

1.0.3

6 months ago

1.0.2

6 months ago

1.0.1

6 months ago

1.0.0

6 months ago