Giter VIP home page Giter VIP logo

ls-slider's Introduction

ls-slider

A lightweight JS/CSS Slider with focus on native mobile touch controls

NPM Version NPM Install Size NPM Downloads

This plugin is still in the works and will need some additional adaptions and features before reaching 1.0.0. Please do NOT use this for production in its current state!!

Pre-release To-Do's

  • fix indicator scroll animation
  • fix infinite scroll on mobile
  • fix initial slide position when infinite are active
  • add visible slides functionality
  • consider accessibility (might be done after initial release)
  • code cleanup

Post-release To-Do's

  • add lazy loading

Setup

Either install the npm package via Node.js by running

npm i ls-slider

or clone the repository and use the Slider.min.js from the /dist folder.

ls-slider is initialized by passing the elements and options to a JS class. For example:

import Slider from "ls-slider";

const slider = document.querySelector(".slider-element");
const options = { infinite: true };

new Slider(slider, options);

Options

visibleSlides

Type Default Description
Number 1 The amount of slides that should be visible in the slider

startingIndex

Type Default Description
Number 0 The slide index that will initially be displayed

sliderElementClass

Type Default Description
String "" A class that will be added to the individual slider elements next to ls-element

touchControls

Type Default Description
Boolean true This enables native touch controls, which allow native swiping to switch slides. This setting will only affect touch devices

autoSlide

Type Default Description
Boolean false Toggle for automatic sliding

interval

Type Default Description
Number 5000 Interval for the automatic sliding in ms

direction

Type Default Description
SlideDirection ("left", "right") SlideDirection.Right ("right") The direction of the automatic slide

previousButton

Type Default Description
String "" <button class="ls-previous-button"></button>

nextButton

Type Default Description
String "" <button class="ls-next-button"></button>

infinite

Type Default Description
Boolean false Toggle for infinite styling

indicators

Type Default Description
Boolean true Toggle for indicators

ls-slider's People

Contributors

frostybiscuit avatar richardroba avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.