PHPackages rollpix/module-image-flip-hover - 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. rollpix/module-image-flip-hover ActiveMagento2-module[Image & Media](/categories/media) rollpix/module-image-flip-hover =============================== Magento 2 module for product image hover effects on PLP. Supports image flip (single alternate image) and gallery slider (navigate all images with arrows, mouse tracking, swipe). Compatible with Luma and Hyvä themes. 2.1.0(1w ago)0961[1 PRs](https://github.com/ROLLPIX/M2-RollpixHoverSlider/pulls)MITPHPPHP ^7.4||^8.0||^8.1||^8.2||^8.3 Since Jan 17Pushed 2mo agoCompare [ Source](https://github.com/ROLLPIX/M2-RollpixHoverSlider)[ Packagist](https://packagist.org/packages/rollpix/module-image-flip-hover)[ Docs](https://github.com/ROLLPIX/M2-ImageFlipHover)[ RSS](/packages/rollpix-module-image-flip-hover/feed)WikiDiscussions main Synced today READMEChangelog (10)Dependencies (15)Versions (18)Used By (0) Rollpix Image Flip & Hover Slider for Magento 2 =================================================== [](#rollpix-image-flip--hover-slider-for-magento-2) [![Magento 2.4.x](https://camo.githubusercontent.com/a196208ceaae23bdd340412205c0d6178ef1f0b2be8c71f4b39b00a976904bf1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342e782d6f72616e67653f6c6f676f3d6d6167656e746f)](https://camo.githubusercontent.com/a196208ceaae23bdd340412205c0d6178ef1f0b2be8c71f4b39b00a976904bf1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d6167656e746f2d322e342e782d6f72616e67653f6c6f676f3d6d6167656e746f)[![PHP 7.4–8.3](https://camo.githubusercontent.com/8734bf5ab0d4f06baf4ffca45916984f262cb8797df9d9eb5f2ec96a6aa67940/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d372e34254532253830253933382e332d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/8734bf5ab0d4f06baf4ffca45916984f262cb8797df9d9eb5f2ec96a6aa67940/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d372e34254532253830253933382e332d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)[![Luma Compatible](https://camo.githubusercontent.com/ed6dac522b5d55ceb024c935d13122b524910d9cc1c66c8e47d482881ca4efe1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c756d612d436f6d70617469626c652d626c7565)](https://camo.githubusercontent.com/ed6dac522b5d55ceb024c935d13122b524910d9cc1c66c8e47d482881ca4efe1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c756d612d436f6d70617469626c652d626c7565)[![Hyvä Compatible](https://camo.githubusercontent.com/606dc4f335b4e328180efdbff052cf0de6a689578656c5e739ee22934a0aab8a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4879762543332541342d436f6d70617469626c652d344443304235)](https://camo.githubusercontent.com/606dc4f335b4e328180efdbff052cf0de6a689578656c5e739ee22934a0aab8a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4879762543332541342d436f6d70617469626c652d344443304235)[![License MIT](https://camo.githubusercontent.com/5caa455d8debc46fb23abbadb45a733a937f3910a73fc875c2f7820468e1bb54/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e)](https://camo.githubusercontent.com/5caa455d8debc46fb23abbadb45a733a937f3910a73fc875c2f7820468e1bb54/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e) **Sponsor: [www.rollpix.com](https://www.rollpix.com)** > **[Leer en Español](README_es.md)** --- Overview -------- [](#overview) Browse product gallery images directly from the product listing page (PLP) without entering the product detail page. Two modes: - **Flip** (classic): shows a single alternate image on hover - **Slider** (v2.0): navigate all gallery images with arrows, swipe, mouse tracking, and click-on-indicator navigation Compatible with **Luma** and **Hyvä** themes. --- Table of Contents ----------------- [](#table-of-contents) - [Features](#features) - [Technical Requirements](#technical-requirements) - [Installation](#installation) - [Configuration](#configuration) - [Configurable Products](#configurable-products) - [Hyvä Theme Support](#hyv%C3%A4-theme-support) - [Troubleshooting](#troubleshooting) - [Changelog](#changelog) - [License](#license) --- Features -------- [](#features) ### Flip Mode [](#flip-mode) - Configurable image roles (native or custom) for the hover image - "Second Gallery Image" option (no role assignment needed) - Fallback role support - 8 animation types: Fade, Slide (4 directions), Zoom, Flip Horizontal/Vertical ### Slider Mode (v2.0) [](#slider-mode-v20) - Full gallery navigation from PLP - **Navigation**: Arrows, Mouse Tracking (desktop), Swipe (mobile), Click on Indicators - **Indicators**: Proportional Bars, Dots, Pills (elongated active dot), Counter (1/5), None - **Transitions**: Slide (carousel), Fade (crossfade), Instant - Independent desktop/mobile configuration - Optional hover flip (auto-advance to image 2 on hover) - Loop navigation and auto-return on mouse leave ### Configurable Products [](#configurable-products) - Collects images from all children (not just the first) - **Images per variant** limit (e.g., 1 = one photo per color) - **ConfigurableGallery integration**: filters parent images by variant when `Rollpix_ConfigurableGallery` is installed ### General [](#general) - Enable/disable per location (category pages, widgets, search, related, CMS, Page Builder) - Lazy loading (images loaded on first interaction) - Dynamic content support (AJAX, infinite scroll, sliders) - Respects `prefers-reduced-motion` preference - All CSS easily overridable from themes --- Technical Requirements ---------------------- [](#technical-requirements) RequirementVersion**Module Name**`rollpix/module-image-flip-hover`**Magento**2.4.x**PHP**7.4 - 8.3--- Installation ------------ [](#installation) ``` composer require rollpix/module-image-flip-hover:^2.0 bin/magento module:enable Rollpix_ImageFlipHover bin/magento setup:upgrade bin/magento setup:di:compile bin/magento setup:static-content:deploy -f bin/magento cache:flush ``` For Hyvä themes, also enable: ``` bin/magento module:enable Rollpix_ImageFlipHoverHyvaCompat bin/magento setup:upgrade ``` --- Configuration ------------- [](#configuration) Navigate to **Stores > Configuration > ROLLPIX > Image Flip Hover**. ### General Settings [](#general-settings) FieldDescriptionDefaultEnableActivate/deactivate the moduleYesHover Mode**Flip** (single alternate image) or **Slider** (full gallery)FlipDesktop OnlyDisable on mobile devices (< 768px)Yes### Flip Mode Settings [](#flip-mode-settings) FieldDescriptionDefaultPrimary Image RoleImage role to show on hoverSecond Gallery ImageFallback Image RoleUsed when primary role not foundSecond Gallery ImageAnimation TypeTransition effectFadeAnimation Speed (ms)Animation duration300### Slider Mode Settings [](#slider-mode-settings) FieldDescriptionDefaultEnable Hover FlipAuto-advance to image 2 on hoverYesTransition TypeSlide / Fade / InstantFadeTransition Speed (ms)Transition duration250Max ImagesMaximum gallery images per product (2-20)8Images per VariantFor configurables: max images per child. 0 = all0Loop NavigationCircular navigation (last → first)NoReturn to Main ImageReturn to image 1 on mouse leaveYes**Desktop Navigation** (multiselect): Arrows, Mouse Tracking, Click on Indicators **Mobile Navigation** (multiselect): Arrows, Swipe, Click on Indicators **Indicators** (per device): Bars, Dots, Pills, Counter, None — with position (top/bottom/below) ### Locations [](#locations) Enable/disable for: Category Pages, Widgets, Search Results, Related/Upsell/Cross-sell, CMS Blocks, Page Builder. --- Configurable Products --------------------- [](#configurable-products-1) The slider collects images from **all children** of a configurable product. Combined with the **Images per Variant** setting: SettingResult (3 colors × 7 photos each)`0` (all)Shows up to 8 images (max\_images cap)`1`Shows 3 images (first photo of each color)`2`Shows 6 images (first 2 of each color)### ConfigurableGallery Integration [](#configurablegallery-integration) When `Rollpix_ConfigurableGallery` is installed, the slider reads the `associated_attributes` column to group parent images by variant. This works when images are uploaded to the configurable parent and associated to colors via ConfigurableGallery's admin UI. --- Hyvä Theme Support ------------------ [](#hyvä-theme-support) The module includes `Rollpix_ImageFlipHoverHyvaCompat`, a sub-module that: - Replaces jQuery/RequireJS JS with vanilla JavaScript - Supports all features: flip, slider, all navigation types, all indicators - CSS is theme-agnostic (works in both Luma and Hyvä) Enable with: ``` bin/magento module:enable Rollpix_ImageFlipHoverHyvaCompat ``` > **Note**: Disable HyvaCompat when using Luma theme. --- Troubleshooting --------------- [](#troubleshooting) ### Flip/slider not showing [](#flipslider-not-showing) 1. Verify the module is enabled and the location is active 2. Check the product has 2+ images in its gallery 3. Clear cache: `bin/magento cache:flush` ### Images not loading on hover [](#images-not-loading-on-hover) 1. Clear static content: `bin/magento setup:static-content:deploy -f` 2. Check browser console for JS errors ### Slider images cropped or misaligned [](#slider-images-cropped-or-misaligned) 1. Clear `var/view_preprocessed/` and redeploy static content 2. Check for CSS conflicts with your theme ### Error after update [](#error-after-update) ``` rm -rf generated/code/* bin/magento setup:di:compile bin/magento cache:flush ``` --- Changelog --------- [](#changelog) See [CHANGELOG.md](CHANGELOG.md) for full version history. --- License ------- [](#license) MIT License --- Support ------- [](#support) - **Issues**: - **Website**: [www.rollpix.com](https://www.rollpix.com) --- Made with ❤️ by [ROLLPIX](https://www.rollpix.com) ### Health Score 46 ↑ FairBetter than 92% of packages Maintenance92 Actively maintained with recent releases Popularity14 Limited adoption so far Community7 Small or concentrated contributor base Maturity58 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 ~11 days Recently: every ~19 days Total 15 Last Release 8d ago Major Versions 1.3.5 → 2.0.02026-04-11 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/20818155?v=4)[Nicolas Marquevich](/maintainers/nmarquev)[@nmarquev](https://github.com/nmarquev) --- Top Contributors [![nmarquev](https://avatars.githubusercontent.com/u/20818155?v=4)](https://github.com/nmarquev "nmarquev (38 commits)") --- Tags imageanimationmodulewidgetgalleryhoverproductflipmagento2magento 2page builder ### Embed Badge ![Health badge](/badges/rollpix-module-image-flip-hover/health.svg) ``` [![Health](https://phpackages.com/badges/rollpix-module-image-flip-hover/health.svg)](https://phpackages.com/packages/rollpix-module-image-flip-hover) ``` ### Alternatives [mollie/magento2 Mollie Payment Module for Magento 2 1131.9M16](/packages/mollie-magento2)[smile/elasticsuite Magento 2 merchandising and search engine built on ElasticSearch 8064.7M49](/packages/smile-elasticsuite)[opengento/module-category-import-export This module add the capability to import and export the categories from the back-office. 1310.9k2](/packages/opengento-module-category-import-export)[run-as-root/magento2-prometheus-exporter Magento2 Prometheus Exporter 68357.9k](/packages/run-as-root-magento2-prometheus-exporter)[buckaroo/magento2 Buckaroo Magento 2 extension 32420.3k8](/packages/buckaroo-magento2)[smile/module-product-label Smile - Extension of Magento2 to be able to contribute images associated to product attribute values. 58101.5k](/packages/smile-module-product-label) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)