PHPackages                             nickdekruijk/horizontal-scroller - 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. [Utility & Helpers](/categories/utility)
4. /
5. nickdekruijk/horizontal-scroller

ActiveLibrary[Utility & Helpers](/categories/utility)

nickdekruijk/horizontal-scroller
================================

Add a horizontal scrolling element

3.0.2(1y ago)065MITJavaScript

Since May 28Pushed 1y ago1 watchersCompare

[ Source](https://github.com/nickdekruijk/horizontal-scroller)[ Packagist](https://packagist.org/packages/nickdekruijk/horizontal-scroller)[ RSS](/packages/nickdekruijk-horizontal-scroller/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (1)DependenciesVersions (8)Used By (0)

Horizontal Scroller
===================

[](#horizontal-scroller)

Make a horizontal scrolling html element better by making it draggable and adding left/right buttons.

Usage
-----

[](#usage)

First make an element that is already nativly scrolling horizontaly, for left/right buttons to position properly you might need to wrap it in a relative positioned element for example:

```

            Item A
            Item B
            Item C
            Item D
            Item E
            Item F
            Item G
            Item H
            Item I
            Item J

```

css:

```
.relative {
    position: relative;
}
.horizontal-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}
.items {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 40px;
}
.item {
    flex: 0 0 200px;
    padding: 5%;
    background-color: #ddd;
}
```

Then make it better by adding this javascript (these options are the default so you could just skip them all if needed):

```

    new HorizontalScroller({
        selector: ".horizontal-scroller",
        buttonRight: true,
        buttonLeft: true,
        draggable: true,
    });

```

This will add two buttons that you can style yourself, for example:

```
.horizontal-scroller-button {
    position: absolute;
    display: block;
    height: 50px;
    width: 50px;
    top: 50%;
    transform: translateY(-50%);
}
.horizontal-scroller-button-left {
    left: 0:
}
.horizontal-scroller-button-right {
    right: 0:
}
```

See `demo.html` for a full working demo.

###  Health Score

25

—

LowBetter than 36% of packages

Maintenance31

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity46

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 ~5 days

Total

7

Last Release

727d ago

Major Versions

2.1.0 → 3.0.02024-06-25

### 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 (21 commits)")

---

Tags

javascripthorizontalscrollscrollbar

### Embed Badge

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

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

###  Alternatives

[tightenco/ziggy

Use your Laravel named routes in JavaScript.

4.3k45.9M309](/packages/tightenco-ziggy)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k32.3M422](/packages/matthiasmullie-minify)[tedivm/jshrink

Javascript Minifier built in PHP

76239.0M172](/packages/tedivm-jshrink)[dkcwd/dkcwd-zf2-munee

Zend Framework 2 module leveraging 'munee' an asset optimisation library developed by Cody Lundquist. You can find munee at http://github.com/meenie/munee

102.1k](/packages/dkcwd-dkcwd-zf2-munee)

PHPackages © 2026

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