PHPackages                             nickdekruijk/slider.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. nickdekruijk/slider.js

ActiveLibrary

nickdekruijk/slider.js
======================

A simple jQuery slider plugin

0.0.8(7y ago)1107MITJavaScript

Since Aug 1Pushed 6y ago1 watchersCompare

[ Source](https://github.com/nickdekruijk/slider.js)[ Packagist](https://packagist.org/packages/nickdekruijk/slider.js)[ RSS](/packages/nickdekruijk-sliderjs/feed)WikiDiscussions master Synced 2mo ago

READMEChangelog (6)Dependencies (1)Versions (7)Used By (0)

slider.js
=========

[](#sliderjs)

A basis slider plugin to create slideshows/faders on your webpage. No fancy stuff, just easy to use yet powerfull enough for most situations. Fully customizable with CSS.

\##Usage HTML:

```

    Slide 1 content
    Slide 2 content
    Slide 3 content

```

\###CSS Style your slider however you want. The .slider element will be the viewport. You probably want this to have CSS {overflow:hidden}

The slides(divs) inside the viewport will be set to absolute positioned, 100% width and 100% height of the viewport/parent div.

You do need to add CSS for the dots if you want them, for example:

```
DIV.slider .dots {display:block;z-index:10;position:absolute;left:0;right:0;text-align:center}
DIV.slider .dots>SPAN {display:inline-block;width:16px;height:16px;border-radius:10px;border:1px solid #fff;margin:10px 5px 0;color:transparent;font-size:11px;line-height:15px}
DIV.slider .dots>SPAN:hover {background-color:rgba(255,255,255,0.5);cursor:pointer}
DIV.slider .dots>SPAN.activeslide {background-color:#fff}
```

You probably want CSS for the previous and next buttons too, for example:

```
DIV.slider:hover .next,
DIV.slider:hover .prev {position:absolute;top:50%;height:50px;width:50px;border-radius:50px;border:2px transparent #fff;margin:-27px 25px 0;z-index:10;background-color:rgba(0,0,0,0.25)}
DIV.slider:hover .next {right:0}
DIV.slider:hover .next>SPAN,
DIV.slider:hover .prev>SPAN {position:absolute;border-top:3px solid #fff;border-right:3px solid #fff;width:20px;height:20px}
DIV.slider:hover .next>SPAN {transform:rotate(45deg);top:13px;left:9px}
DIV.slider:hover .prev>SPAN {transform:rotate(-135deg);top:13px;left:17px}
DIV.slider:hover .next:hover,
DIV.slider:hover .prev:hover {background-color:rgba(0,0,0,0.6);cursor:pointer}
```

\###JS

```
$('DIV.slider').slider({
    option1:'value1',
    option2:'value2'
});
```

\###Options: default value|other options

```
transition: fade|swipe|scroll   # Fadein/-out, Swipe from right to left or scroll everything
transitionspeed: 400            # The transition speed in milliseconds, e.g. time it takes to fadein/-out or swipe to next slide
alternativefade: false|true     # Use alternative method for fading so slides with transparent elements will work better but site background will be slightly visible during transition
autoplay: true|false            # Automaticaly start playing
pauseonhover: true|false         # Pause autoplay when user hovers over the viewport
arrowkeys: true|false           # Enable keyboard left and right arrow keys
touchkeys: false|true           # Show arrow keys on touch devices
touchwipe: true|false           # Enable touch device left and right swipe gestures
sliderspeed: 5000               # Time to wait in milliseconds before next slide is shown when autoplay=true
slideselector: 'div'            # The viewport DOM child element that will represent slides. Could also be .slide if you have html like Slide content etc.
activeslide: 'activeslide'      # Class to add to the active slide/dot
lazy: false                     # Lazy load images in the slider, set data-lazy="imageurl" on elements. On an img the src attribute will be set and the background-image style will be set on other element types

```

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~196 days

Recently: every ~210 days

Total

6

Last Release

2589d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0b01fc7c2c39bbe8f87b4afa70ffe1cf2bb787310e1d22fcfed6ae527d4573bb?d=identicon)[nickdekruijk](/maintainers/nickdekruijk)

---

Top Contributors

[![nickdekruijk](https://avatars.githubusercontent.com/u/607302?v=4)](https://github.com/nickdekruijk "nickdekruijk (17 commits)")

---

Tags

jqueryslider

### Embed Badge

![Health badge](/badges/nickdekruijk-sliderjs/health.svg)

```
[![Health](https://phpackages.com/badges/nickdekruijk-sliderjs/health.svg)](https://phpackages.com/packages/nickdekruijk-sliderjs)
```

###  Alternatives

[jquery-form/form

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX.

5.2k235.5k6](/packages/jquery-form-form)[nicolaskruchten/pivottable

Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.

4.4k202.9k1](/packages/nicolaskruchten-pivottable)[flesler/jquery.scrollto

Lightweight, cross-browser and highly customizable animated scrolling with jQuery

3.7k40.1k](/packages/flesler-jqueryscrollto)[mistic100/jquery-querybuilder

jQuery plugin for user friendly query/filter creator

1.7k54.1k2](/packages/mistic100-jquery-querybuilder)[datatables.net/datatables.net

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is jQuery DataTables

56156.5k25](/packages/datatablesnet-datatablesnet)[edofre/yii2-slider-pro

Yii2 widget for slider-pro

132.7k](/packages/edofre-yii2-slider-pro)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)