Socket
Socket
Sign inDemoInstall

slendr

Package Overview
Dependencies
2
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

slendr

A responsive & lightweight slider for modern browsers.


Version published
Maintainers
1
Weekly downloads
287
decreased by-18%

Weekly downloads

Readme

Source

Slendr npm npm Build Status JavaScript Style Guide

A responsive & lightweight slider for modern browsers.

Features

  • Written and tested entirely using Typescript.
  • Lightweight (just 2KB gzipped UMD)
  • Responsive (desktop and mobile) by default.
  • Modern browsers only. No more legacy browsers like IE10 or IE11 (but you can find it on v1.3 release).
  • High performance by Lighthouse audit.
  • CSS3 Hardware Acceleration
  • 60fps animation.
  • Progressive images loading.
  • Highly customizable.
  • SASS support.

:tada: View demo on Codepen.

Install

Yarn

yarn add slendr

NPM

npm install slendr --save

The UMD and style builds are also available on unpkg.

<link rel="stylesheet" href="https://unpkg.com/slendr/dist/slendr.min.css">
<script src="https://unpkg.com/slendr/dist/slendr.min.js"></script>

You can use the component via window.slendr

Usage

Include the base styles:

<link rel="stylesheet" href="https://unpkg.com/slendr/dist/slendr.min.css">

Styles: It can customize the bases styles via the SCSS file at slendr/dist/slendr.scss.

Define the markup:

<div class="slendr">
  <nav class="slendr-direction">
    <a href="#" class="slendr-prev"><i class="fa fa-angle-left"></i></a>
    <a href="#" class="slendr-next"><i class="fa fa-angle-right"></i></a>
  </nav>

  <nav class="slendr-control"></nav>

  <div class="slendr-slides">
    <section class="slendr-slide" data-slide-src="slide1.jpg"></section>
    <section class="slendr-slide" data-slide-src="slide2.jpg"></section>
    <section class="slendr-slide" data-slide-src="slide3.jpg"></section>
  </div>
</div>

Create the slider:

import { Slendr } from 'slendr'

const myslider = new Slendr({
  slideshow: true
})

myslider.on('move', (direction, index, element) => console.log(direction))

API

Options

NameTypeDefaultDescription
containerString.slendrThe container supports string query selector or HTMLElement.
selectorString.slendr-slides > .slendr-slideQuery selector for slides.
animationClassString.slendr-animateClass name for animation used in slider translation.
directionNavsBooleantrueDisplay the direction navs (arrow buttons).
directionNavPrevString.slendr-prevClass name for previous arrow button.
directionNavNextString.slendr-nextClass name for next arrow button.
slideVisibleClassString.slendr-visibleClass name used for show the current slide.
slideActiveClassString.slendr-activeClass name used when some slide is active.
slideshowBooleantrueIf slider should work like a slideshow.
slideshowSpeedInt4000The slideshow speed (in milliseconds).
keyboardBooleanfalseActivate the keyboard arrow navigation.
controlNavsBooleantrueDisplay the control navigation.
controlNavClassBoolean.slendr-controlClass name of control navigation.
controlNavClassActiveBoolean.slendr-control-activeClass name for active control navigation.

Animation speed: It's defined via the animation class at style.scss. Feel free to use your own CSS timing function.

Methods

NameUsageDescription
prevslendr.prev()Move to previous slide.
nextslendr.next()Move to next slide.
moveslendr.move(index)Move the slider by index.
playslendr.play()Play the slideshow.
pauseslendr.pause()Pause the slideshow.

Events

NameUsageDescription
moveslendr.on('move', (direction, index, element) => {})Trigger when slider moves to previous or next slide.
prevslendr.on('prev', (index, element) => {})Trigger when slider moves to previous slide.
nextslendr.on('next', (index, element) => {})Trigger when slider moves to next slide.
playslendr.on('play', (index) => {})Trigger when play the slideshow.
pauseslendr.on('pause', (index) => {})Trigger when pause the slideshow.

Attributes

On demand attributes

These attributes can be created manually.

data-slide-src: Set the image source URL. After image loading, Slendr will place it as slide background via css background-image.

Slender doesn't depend on images necessarily to working. It can omit this attribute in any case.

<div class="slendr-slides">
  <section class="slendr-slide" data-slide-src="image1.jpg"></section>
  <section class="slendr-slide"></section>
  <section class="slendr-slide" data-slide-src="image2.jpg"></section>
</div>
Runtime attributes

These attributes are created by Slendr.

data-slides-length: Contains the length of slides.

<div class="slendr" data-slides-length="1000">...</div>

data-slide-index: Contains the slide index.

<section class="slendr-slide" data-slide-index="0" data-slide-src="image1.jpg">...</section>
<section class="slendr-slide" data-slide-index="1" data-slide-src="image2.jpg">...</section>

Browser support

  • Firefox
  • Chrome
  • Edge
  • Safari, iOS Safari

Development

yarn start

Contributions

Pull requests or issues are very appreciated.

License

MIT license

© 2018 José Luis Quintana

Keywords

FAQs

Last updated on 18 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc