{"id":21674343,"url":"https://github.com/drunomics/swiper-gallery","last_synced_at":"2026-05-20T04:45:49.744Z","repository":{"id":46826456,"uuid":"136617981","full_name":"drunomics/swiper-gallery","owner":"drunomics","description":"Drupal contrib module for a swiper integration.","archived":false,"fork":false,"pushed_at":"2022-10-14T07:05:36.000Z","size":1008,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"2.x","last_synced_at":"2025-03-16T01:44:56.503Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drunomics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-08T12:46:25.000Z","updated_at":"2024-11-04T11:05:46.000Z","dependencies_parsed_at":"2022-09-22T14:24:52.443Z","dependency_job_id":null,"html_url":"https://github.com/drunomics/swiper-gallery","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drunomics%2Fswiper-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drunomics%2Fswiper-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drunomics%2Fswiper-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drunomics%2Fswiper-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drunomics","download_url":"https://codeload.github.com/drunomics/swiper-gallery/tar.gz/refs/heads/2.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244583185,"owners_count":20476233,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T13:44:10.944Z","updated_at":"2026-05-20T04:45:44.726Z","avatar_url":"https://github.com/drunomics.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Swiper Gallery\n\nSwiper gallery is a custom integration of [Swiper](http://idangero.us/swiper/) \nfor the media gallery.\n\n\n## Table of content\n\n * [Swiper Gallery](#swiper-gallery)\n   * [Table of content](#table-of-content)\n   * [Introduction](#introduction)\n     * [Features](#features)\n     * [Limitations](#limitations)\n     * [Browser support](#browser-support)\n   * [Requirements](#requirements)\n   * [Supported Modules](#supported-modules)\n   * [Installation](#installation)\n   * [Configuration](#configuration)\n     * [Image viewmodes](#image-viewmodes)\n     * [Gallery formatter](#gallery-formatter)\n     * [Custom lazy loading icon](#custom-lazy-loading-icon)\n     * [Ad entities as breakers](#ad-entities-as-breakers)\n   * [Development / Contributing](#development--contributing)\n     * [Demo](#demo)\n   * [Maintainers](#maintainers)\n\n## Introduction\n\nThis module provides a field formatter that allows a media gallery to be \nrendered in a preconfigured [Swiper](http://idangero.us/swiper/) gallery.\n\n### Features\n\n * Desktop \u0026 mobile mode, automatically switches between the two.\n * Desktop mode: Looping horizontal slides with thumbnails for navigation.\n * Mobile mode: Vertical slides. \n * Breaker blocks which are inserted after every x image.\n * Url navigation to slides \u0026 option to replace history for every slide.\n * Track page impressions for IVW and GTM if available.\n \n### Limitations\n\n * No configuration of the swiper instance, all is preconfigured.\n * Gallery slides can not be used with responsive image styles.\n\n### Browser support\n\n| Browser            | from version |\n|--------------------|-------------:|\n| Android Browser    |            4 |\n| Chrome             |           61 |\n| Chrome for Android |           61 |\n| Edge               |           15 |\n| Firefox            |           57 |\n| Internet Explorer  |           11 |\n| Opera              |           49 |\n| Safari             |        9+604 |\n| Safari Mobile      |           11 | \n| Samsung Internet   |          5.2 |\n\n\n## Requirements\n\n * [D8 Media core module | Drupal.org](https://www.drupal.org/docs/8/core/modules/media)\n\n\n## Supported Modules\n\nPage impression tracking is supported out of the box for the following modules:\n \n * [GoogleTagManager | Drupal.org](https://www.drupal.org/project/google_tag)\n * [IVW Integration | Drupal.org](https://www.drupal.org/project/ivw_integration) \n\nWhen the corresponding JS object is detected it will track an impression on\nevery slide.\n\nAd entities can be inserted via breaker block (see [Ad entities as breakers](#ad-entities-as-breakers)):\n\n * [Advertising Entity | Drupal.org](https://www.drupal.org/project/ad_entity)\n\n\n## Installation\n\n * Install the module as you would normally install a contributed Drupal module.\n   See [Installing Drupal 8 Modules](https://www.drupal.org/node/1897420) for further information.\n\n\n## Configuration\n\nTo enable the gallery, the field formatter for a media gallery must be set to \n`Swiper gallery` ([Gallery formatter](#gallery-formatter)). \n\nSince the viewmodes of the slides \u0026 preview are also configurable, they should \nbe set up first ([Image viewmodes](#image-viewmodes)).\n\nIt is important to use a separate image style for the gallery slides since it\nis necessary to alter the image tags to be able to lazy load them with swiper.\nThis is done in a preprocess hook (see swiper_gallery_preprocess_image()).\n\nThe used image styles for the slides must then be added to the settings file.\nTo do so, copy the `/config/install/swiper_gallery.settings.yml` to Drupal's\nconfig directory if it wasn't done so during the installation and add one or\nmore image styles to the `slide_image_styles` variable.\n\n### Image viewmodes\n\nAdd and configure image viewmodes for the gallery:\n\n * Goto `/admin/structure/media/manage/image/display`\n * Setup viewmodes for:\n   * The gallery itself (e.g.: `swiper gallery`)\n   * The slides inside the gallery (`swiper gallery slide`)\n   * The preview image for the media preview (`swiper gallery media preview`)\n   * The preview image for the thumbs preview (`swiper gallery thumbs preview`)\n   * The thumbnails in the thumbs preview (`swiper gallery thumbs preview thumb`) \n * Create an image style for the gallery slides \u0026 set it in the slide viewmode\n\n### Gallery formatter\n\nSelect \u0026 configure the `Swiper Gallery` field formatter: \n\n * Goto `/admin/structure/media/manage/gallery/display`\n * Add \u0026 select the gallery viewmode (`swiper gallery`)\n * On `Media images` select the format `Swiper Gallery`\n * Open the field formatter settings \u0026 assign the viewmodes\n * Optionally configure other settings, like launcher text or breaker blocks\n\n### Custom lazy loading icon\n\nTo set a custom loading icon, add the scss (or the css equivalent) in your \ntheme like this, eg.:\n\n```css\n.gallery {\n  .gallery-slide .swiper-lazy-preloader {\n    animation: none;\n    \u0026:after {\n      all: initial;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      content: url('/assets/images/infinity-loader.gif');\n      background: transparent;\n    }\n  }\n}\n```\n\n### Ad entities as breakers\n\nIf you want to display an AdEntity on every x slide, you can configure the \nbreaker to be an AdDisplay block. \n\nSince we had troubles with loading of ads you need to disable the initialization \nfor the ad entities that are used in the breaker. The ads will be initialized by \nthe gallery (see build/src/components/05-gallery/gallery-ads.js)\n\nThe reason for this is because of the looping functionality of swiper, which \nwill generate duplicates of the slides and put them before and after the main \nslides. The ad entity module would initialize the first ad slide, which is a \nduplicate, but the visible ad slide would stay uninitialized.\n\n\n## Development / Contributing\n\nFor development you can use the [Demo](#demo) as a starting point. You can setup \na development environment which contains a full drupal installation within a \ndocker container with test content \u0026 automated tests.\n\nFor how to build assets see build/README.md\n\n### Demo\n\nTry the gallery in a drupal demo installation within a docker container.\nVisit https://github.com/drunomics/swiper-gallery-demo and follow the README. \n\n\n## Maintainers\n\n * Mathias (mbm80) - https://www.drupal.org/u/mbm80\n\nSupporting organizations:\n \n * drunomics - https://www.drupal.org/drunomics\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrunomics%2Fswiper-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrunomics%2Fswiper-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrunomics%2Fswiper-gallery/lists"}