PHPackages                             heimrichhannot/contao-tiny-slider-bundle - 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. heimrichhannot/contao-tiny-slider-bundle

ActiveContao-bundle[Utility & Helpers](/categories/utility)

heimrichhannot/contao-tiny-slider-bundle
========================================

Tiny slider, a vanilla javascript content slider for contao.

1.22.1(1y ago)43.6k2[2 issues](https://github.com/heimrichhannot/contao-tiny-slider-bundle/issues)[1 PRs](https://github.com/heimrichhannot/contao-tiny-slider-bundle/pulls)1LGPL-3.0-or-laterPHPPHP ^7.1|^8.0

Since Nov 12Pushed 1y ago5 watchersCompare

[ Source](https://github.com/heimrichhannot/contao-tiny-slider-bundle)[ Packagist](https://packagist.org/packages/heimrichhannot/contao-tiny-slider-bundle)[ Docs](https://github.com/heimrichhannot/contao-tiny-slider-bundle)[ RSS](/packages/heimrichhannot-contao-tiny-slider-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (8)Versions (74)Used By (1)

Tiny slider bundle
==================

[](#tiny-slider-bundle)

A slider bundle for contao based on [Tiny Slider](https://github.com/ganlanyuan/tiny-slider).

Features
--------

[](#features)

- global configuration
- content elements for image and content sliders
- [Encore Bundle](https://github.com/heimrichhannot/contao-encore-bundle) support
- show [List Bundle](https://github.com/heimrichhannot/contao-list-bundle) list as slider
- bundled config element type for [List Bundle](https://github.com/heimrichhannot/contao-list-bundle) and [Reader Bundle](https://github.com/heimrichhannot/contao-reader-bundle)

Usage
-----

[](#usage)

### Install

[](#install)

1. install bundle with composer or contao manager

    ```
    composer require heimrichhannot/contao-tiny-slider-bundle

    ```
2. Call contao install tool and update the database

### Setup

[](#setup)

1. Create a tiny slider config (System -> Tiny-Slider). Please consider the tiny slider documentation for more informations about the different config options.
2. Select the created config in a content element, an reader config element or in an list config after activating "Render as Tiny slider".

### Usage as config element type (list and reader bundle)

[](#usage-as-config-element-type-list-and-reader-bundle)

This bundle comes with an [config element type](https://github.com/heimrichhannot/contao-config-element-type-bundle), already registered for list and reader bundle.

1. Add 'Slider (Tiny Slider)' as list or reader config element to your configuration
2. your defined template variable has two keys, html and images. html contains the complete slider, images just the prepared images if you want to define your own wrapper. So your typical template code to output a slider would be:

```
{% if tinySlider.html is defined %}
    {{ tinySlider.html }}
{% endif %}
```

Twig usage
----------

[](#twig-usage)

Tiny slider comes with an `tiny_slider_wrapper.html.twig` that can be embedded inside your custom twig template like the following:

```
{% set tinySliderConfigId = 1 %}
{% embed '@ContaoTinySlider/tiny_slider_wrapper.html.twig' with {config: tinySliderConfigId, selector: '.list-images', wrapperClass: 'overflow-hidden'} %}
    {% block slides %}

            {% for i, singleSRC in multiSRC %}

                    {{ singleSRC|image([240,180,'px'],{href : url, lazyload: {class: 'tns-lazy-img', src: 'data-src'}})|raw }}

            {% endfor %}

    {% endblock %}
{% endembed %}

```

There are also two twig extension available:

**tiny\_slider\_wrapper\_class**

Returns the tiny slider wrapper css classes.

```
{% set tinySliderConfigId = 1 %}
{{ tinySliderConfigId|tiny_slider_wrapper_class}}

```

**tiny\_slider\_container\_attributes**

Returns the tiny slider `data-tiny-slider-config` attribute for the container inside the wrapper. The parameter `selector` is optional and should point to the slides wrapper container.

```
{% set tinySliderConfigId = 1 %}
{{ config|tiny_slider_container_attributes(selector|default('.tiny-slider-container'))|raw }}

```

Custom transition effects
-------------------------

[](#custom-transition-effects)

In order to use custom transitions for example using [animate.css](https://daneden.github.io/animate.css/) choose from the following effects.

### Fade effect

[](#fade-effect)

- import animate.css stylesheet
- set tiny slider config parameter `Mode` to `gallery`
- set tiny slider config parameter `Intro animation` to 'fadeIn'
- set tiny slider config parameter`Outro animation` to 'fadeOut'
- empty tiny slider config parameter `Normal animation`

Assets
------

[](#assets)

### NPM/Yarn Package

[](#npmyarn-package)

The assets for this bundle are provided as NPM/Yarn package `@hundh/contao-tiny-slider-bundle`.

[![npm version](https://camo.githubusercontent.com/f6b58ca01e6ec6ef35418e12a0cd61e11328fc1eb284a5b2d20bec63f140fccd/68747470733a2f2f62616467652e667572792e696f2f6a732f25343068756e6468253246636f6e74616f2d74696e792d736c696465722d62756e646c652e737667)](https://badge.fury.io/js/%40hundh%2Fcontao-tiny-slider-bundle)

You will find the sources under [src/Resources/npm-package](src/Resources/npm-package).

Known Issues
------------

[](#known-issues)

### Lazyload

[](#lazyload)

If you use tiny-slider together with `https://github.com/heimrichhannot/contao-speed-bundle` and its lazyload compoment enabled in page layout, ensure that you enabled `Lazy load` in tiny slider configuration as well and keep the `Lazy load selector` default value to `.tns-lazy-img`.

If you use the TwigExtension `image` that you must provide proper lazyload information in `data` attributes:

```
{{ singleSRC|image([240,120,'px'],{lazyload: {class: 'tns-lazy-img', src: 'data-src'} }}

```

###  Health Score

44

—

FairBetter than 92% of packages

Maintenance35

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community20

Small or concentrated contributor base

Maturity81

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 52.8% 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 ~32 days

Recently: every ~120 days

Total

72

Last Release

424d ago

PHP version history (2 changes)1.0.0PHP ^7.1

1.18.0PHP ^7.1|^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de)

---

Top Contributors

[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (28 commits)")[![salteax](https://avatars.githubusercontent.com/u/46114448?v=4)](https://github.com/salteax "salteax (12 commits)")[![vvohh](https://avatars.githubusercontent.com/u/75325799?v=4)](https://github.com/vvohh "vvohh (7 commits)")[![ericges](https://avatars.githubusercontent.com/u/25957923?v=4)](https://github.com/ericges "ericges (3 commits)")[![mirkogleibe](https://avatars.githubusercontent.com/u/850300?v=4)](https://github.com/mirkogleibe "mirkogleibe (1 commits)")[![fatcrobat](https://avatars.githubusercontent.com/u/480054?v=4)](https://github.com/fatcrobat "fatcrobat (1 commits)")[![rabauss](https://avatars.githubusercontent.com/u/14016098?v=4)](https://github.com/rabauss "rabauss (1 commits)")

---

Tags

contaocarouselslidertiny slidervanilla javascript

### Embed Badge

![Health badge](/badges/heimrichhannot-contao-tiny-slider-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/heimrichhannot-contao-tiny-slider-bundle/health.svg)](https://phpackages.com/packages/heimrichhannot-contao-tiny-slider-bundle)
```

###  Alternatives

[codefog/contao-haste

haste extension for Contao Open Source CMS

42650.8k139](/packages/codefog-contao-haste)[contao/core-bundle

Contao Open Source CMS

1231.6M2.4k](/packages/contao-core-bundle)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3183.3k6](/packages/codefog-contao-news-categories)[terminal42/contao-folderpage

Provides a new page type for Contao that allows you to group pages into folders.

18147.9k9](/packages/terminal42-contao-folderpage)[inspiredminds/contao-fieldset-duplication

Contao extension to allow the duplication of form fieldsets in the front end by the user for additional input fields.

158.2k1](/packages/inspiredminds-contao-fieldset-duplication)

PHPackages © 2026

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