Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
slendr
Advanced tools
Readme
A responsive & lightweight slider for modern browsers.
:tada: View demo on Codepen.
yarn add slendr
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
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))
Name | Type | Default | Description |
---|---|---|---|
container | String | .slendr | The container supports string query selector or HTMLElement. |
selector | String | .slendr-slides > .slendr-slide | Query selector for slides. |
animationClass | String | .slendr-animate | Class name for animation used in slider translation. |
directionNavs | Boolean | true | Display the direction navs (arrow buttons). |
directionNavPrev | String | .slendr-prev | Class name for previous arrow button. |
directionNavNext | String | .slendr-next | Class name for next arrow button. |
slideVisibleClass | String | .slendr-visible | Class name used for show the current slide. |
slideActiveClass | String | .slendr-active | Class name used when some slide is active. |
slideshow | Boolean | true | If slider should work like a slideshow. |
slideshowSpeed | Int | 4000 | The slideshow speed (in milliseconds). |
keyboard | Boolean | false | Activate the keyboard arrow navigation. |
controlNavs | Boolean | true | Display the control navigation. |
controlNavClass | Boolean | .slendr-control | Class name of control navigation. |
controlNavClassActive | Boolean | .slendr-control-active | Class 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.
Name | Usage | Description |
---|---|---|
prev | slendr.prev() | Move to previous slide. |
next | slendr.next() | Move to next slide. |
move | slendr.move(index) | Move the slider by index. |
play | slendr.play() | Play the slideshow. |
pause | slendr.pause() | Pause the slideshow. |
Name | Usage | Description |
---|---|---|
move | slendr.on('move', (direction, index, element) => {}) | Trigger when slider moves to previous or next slide. |
prev | slendr.on('prev', (index, element) => {}) | Trigger when slider moves to previous slide. |
next | slendr.on('next', (index, element) => {}) | Trigger when slider moves to next slide. |
play | slendr.on('play', (index) => {}) | Trigger when play the slideshow. |
pause | slendr.on('pause', (index) => {}) | Trigger when pause the slideshow. |
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>
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>
yarn start
Pull requests or issues are very appreciated.
MIT license
© 2018 José Luis Quintana
FAQs
A responsive & lightweight slider for modern browsers.
The npm package slendr receives a total of 247 weekly downloads. As such, slendr popularity was classified as not popular.
We found that slendr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.