PHPackages                             drunomics/swiper\_gallery - 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. [Image & Media](/categories/media)
4. /
5. drunomics/swiper\_gallery

ActiveDrupal-module[Image & Media](/categories/media)

drunomics/swiper\_gallery
=========================

Swiper gallery media integration.

2.1.2(4y ago)05.7kGPL-2.0+JavaScript

Since Sep 14Pushed 3y agoCompare

[ Source](https://github.com/drunomics/swiper-gallery)[ Packagist](https://packagist.org/packages/drunomics/swiper_gallery)[ RSS](/packages/drunomics-swiper-gallery/feed)WikiDiscussions 2.x Synced 2d ago

READMEChangelogDependenciesVersions (10)Used By (0)

Swiper Gallery
==============

[](#swiper-gallery)

Swiper gallery is a custom integration of [Swiper](http://idangero.us/swiper/)for the media gallery.

Table of content
----------------

[](#table-of-content)

- [Swiper Gallery](#swiper-gallery)
    - [Table of content](#table-of-content)
    - [Introduction](#introduction)
        - [Features](#features)
        - [Limitations](#limitations)
        - [Browser support](#browser-support)
    - [Requirements](#requirements)
    - [Supported Modules](#supported-modules)
    - [Installation](#installation)
    - [Configuration](#configuration)
        - [Image viewmodes](#image-viewmodes)
        - [Gallery formatter](#gallery-formatter)
        - [Custom lazy loading icon](#custom-lazy-loading-icon)
        - [Ad entities as breakers](#ad-entities-as-breakers)
    - [Development / Contributing](#development--contributing)
        - [Demo](#demo)
    - [Maintainers](#maintainers)

Introduction
------------

[](#introduction)

This module provides a field formatter that allows a media gallery to be rendered in a preconfigured [Swiper](http://idangero.us/swiper/) gallery.

### Features

[](#features)

- Desktop & mobile mode, automatically switches between the two.
- Desktop mode: Looping horizontal slides with thumbnails for navigation.
- Mobile mode: Vertical slides.
- Breaker blocks which are inserted after every x image.
- Url navigation to slides & option to replace history for every slide.
- Track page impressions for IVW and GTM if available.

### Limitations

[](#limitations)

- No configuration of the swiper instance, all is preconfigured.
- Gallery slides can not be used with responsive image styles.

### Browser support

[](#browser-support)

Browserfrom versionAndroid Browser4Chrome61Chrome for Android61Edge15Firefox57Internet Explorer11Opera49Safari9+604Safari Mobile11Samsung Internet5.2Requirements
------------

[](#requirements)

- [D8 Media core module | Drupal.org](https://www.drupal.org/docs/8/core/modules/media)

Supported Modules
-----------------

[](#supported-modules)

Page impression tracking is supported out of the box for the following modules:

- [GoogleTagManager | Drupal.org](https://www.drupal.org/project/google_tag)
- [IVW Integration | Drupal.org](https://www.drupal.org/project/ivw_integration)

When the corresponding JS object is detected it will track an impression on every slide.

Ad entities can be inserted via breaker block (see [Ad entities as breakers](#ad-entities-as-breakers)):

- [Advertising Entity | Drupal.org](https://www.drupal.org/project/ad_entity)

Installation
------------

[](#installation)

- Install the module as you would normally install a contributed Drupal module. See [Installing Drupal 8 Modules](https://www.drupal.org/node/1897420) for further information.

Configuration
-------------

[](#configuration)

To enable the gallery, the field formatter for a media gallery must be set to `Swiper gallery` ([Gallery formatter](#gallery-formatter)).

Since the viewmodes of the slides & preview are also configurable, they should be set up first ([Image viewmodes](#image-viewmodes)).

It is important to use a separate image style for the gallery slides since it is necessary to alter the image tags to be able to lazy load them with swiper. This is done in a preprocess hook (see swiper\_gallery\_preprocess\_image()).

The used image styles for the slides must then be added to the settings file. To do so, copy the `/config/install/swiper_gallery.settings.yml` to Drupal's config directory if it wasn't done so during the installation and add one or more image styles to the `slide_image_styles` variable.

### Image viewmodes

[](#image-viewmodes)

Add and configure image viewmodes for the gallery:

- Goto `/admin/structure/media/manage/image/display`
- Setup viewmodes for:
    - The gallery itself (e.g.: `swiper gallery`)
    - The slides inside the gallery (`swiper gallery slide`)
    - The preview image for the media preview (`swiper gallery media preview`)
    - The preview image for the thumbs preview (`swiper gallery thumbs preview`)
    - The thumbnails in the thumbs preview (`swiper gallery thumbs preview thumb`)
- Create an image style for the gallery slides & set it in the slide viewmode

### Gallery formatter

[](#gallery-formatter)

Select & configure the `Swiper Gallery` field formatter:

- Goto `/admin/structure/media/manage/gallery/display`
- Add & select the gallery viewmode (`swiper gallery`)
- On `Media images` select the format `Swiper Gallery`
- Open the field formatter settings & assign the viewmodes
- Optionally configure other settings, like launcher text or breaker blocks

### Custom lazy loading icon

[](#custom-lazy-loading-icon)

To set a custom loading icon, add the scss (or the css equivalent) in your theme like this, eg.:

```
.gallery {
  .gallery-slide .swiper-lazy-preloader {
    animation: none;
    &:after {
      all: initial;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      content: url('/assets/images/infinity-loader.gif');
      background: transparent;
    }
  }
}
```

### Ad entities as breakers

[](#ad-entities-as-breakers)

If you want to display an AdEntity on every x slide, you can configure the breaker to be an AdDisplay block.

Since we had troubles with loading of ads you need to disable the initialization for the ad entities that are used in the breaker. The ads will be initialized by the gallery (see build/src/components/05-gallery/gallery-ads.js)

The reason for this is because of the looping functionality of swiper, which will generate duplicates of the slides and put them before and after the main slides. The ad entity module would initialize the first ad slide, which is a duplicate, but the visible ad slide would stay uninitialized.

Development / Contributing
--------------------------

[](#development--contributing)

For development you can use the [Demo](#demo) as a starting point. You can setup a development environment which contains a full drupal installation within a docker container with test content & automated tests.

For how to build assets see build/README.md

### Demo

[](#demo)

Try the gallery in a drupal demo installation within a docker container. Visit  and follow the README.

Maintainers
-----------

[](#maintainers)

- Mathias (mbm80) -

Supporting organizations:

- drunomics -

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 93.4% 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 ~125 days

Recently: every ~112 days

Total

10

Last Release

1720d ago

Major Versions

1.x-dev → 2.1.02020-10-05

### Community

Maintainers

![](https://www.gravatar.com/avatar/eeeeebd20b7521af69522a34b9ea485911ceb2a95f4d8616de37c05e60a4d2a9?d=identicon)[mbm80](/maintainers/mbm80)

---

Top Contributors

[![mbm80](https://avatars.githubusercontent.com/u/19147241?v=4)](https://github.com/mbm80 "mbm80 (57 commits)")[![maximilianmikus](https://avatars.githubusercontent.com/u/1254146?v=4)](https://github.com/maximilianmikus "maximilianmikus (4 commits)")

### Embed Badge

![Health badge](/badges/drunomics-swiper-gallery/health.svg)

```
[![Health](https://phpackages.com/badges/drunomics-swiper-gallery/health.svg)](https://phpackages.com/packages/drunomics-swiper-gallery)
```

###  Alternatives

[goat1000/svggraph

Generates SVG graphs

133890.0k3](/packages/goat1000-svggraph)[imagekit/imagekit

PHP library for Imagekit

46877.3k10](/packages/imagekit-imagekit)[gravatarphp/gravatar

Gravatar URL builder which is most commonly called as a Gravatar library

12644.1k2](/packages/gravatarphp-gravatar)

PHPackages © 2026

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