PHPackages                             tharinduhdev/imagegallery - 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. tharinduhdev/imagegallery

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

tharinduhdev/imagegallery
=========================

This Magento module is useful to render an image slider

00PHP

Since Nov 24Pushed 5mo agoCompare

[ Source](https://github.com/hettipower/imagegallery)[ Packagist](https://packagist.org/packages/tharinduhdev/imagegallery)[ RSS](/packages/tharinduhdev-imagegallery/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Image Gallery Slider Extension for Magento 2
============================================

[](#image-gallery-slider-extension-for-magento-2)

A powerful and flexible Magento 2 extension that allows you to create and manage image sliders with ease. This extension provides a user-friendly admin interface for managing sliders and displays them on the frontend using the Swiper.js library.

Features
--------

[](#features)

- 🎨 **Easy Slider Management**: Create and manage multiple image sliders from the Magento admin panel
- 🖼️ **Multiple Images**: Add unlimited images to each slider
- 🎯 **Widget Support**: Display sliders anywhere on your store using Magento widgets
- 🎪 **Swiper.js Integration**: Modern, touch-enabled slider with smooth animations
- 📱 **Responsive Design**: Fully responsive sliders that work on all devices
- ⚙️ **Status Control**: Enable/disable sliders individually
- 🏷️ **Alt Tags**: Add alt text to images for better SEO
- 🔍 **GraphQL Support**: Query sliders via GraphQL API
- 🎛️ **Admin Interface**: Intuitive admin panel with image upload functionality

Requirements
------------

[](#requirements)

- **Magento 2**: 2.4.x or higher
- **PHP**: 8.1, 8.2, or 8.3
- **Magento Framework**: 103.0.\*
- **Browser Support**: Modern browsers (Chrome, Firefox, Safari, Edge)

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

[](#installation)

### Via Composer (Recommended)

[](#via-composer-recommended)

```
composer require tharinduhdev/imagegallery
```

### Manual Installation

[](#manual-installation)

1. Download or clone this repository
2. Copy the extension to `app/code/Tharinduhdev/Imagegallery/`
3. Run the following commands:

```
php bin/magento module:enable Tharinduhdev_Imagegallery
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
```

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

[](#configuration)

### Admin Panel Access

[](#admin-panel-access)

After installation, navigate to:

- **Admin Panel** → **Content** → **Image Sliders** → **Manage Sliders**

### Creating a Slider

[](#creating-a-slider)

1. Go to **Content** → **Image Sliders** → **Manage Sliders**
2. Click **Add New Slider**
3. Fill in the following fields:
    - **Name**: Display name for the slider (for admin reference)
    - **Identifier**: Unique identifier (e.g., `homepage-banner`, `product-slider`)
    - **Status**: Enable or disable the slider
4. Upload images using the image gallery
5. Add alt tags for each image (recommended for SEO)
6. Click **Save** or **Save and Continue Edit**

### Permissions

[](#permissions)

The extension includes ACL (Access Control List) permissions:

- `Tharinduhdev_Imagegallery::elements` - Access to Image Sliders menu
- `Tharinduhdev_Imagegallery::manage_sliders` - Manage sliders
- `Tharinduhdev_Imagegallery::config_slider` - Configuration access

Configure these in **System** → **Permissions** → **User Roles**

Usage
-----

[](#usage)

### Using the Widget

[](#using-the-widget)

1. Go to **Content** → **Widgets**
2. Click **Add Widget**
3. Select **Image Slider Widget** from the widget type dropdown
4. Configure the widget:
    - **Widget Title**: Title for the widget (optional)
    - **Slider Identifier**: Enter the identifier of the slider you created
5. Choose where to display the widget:
    - **Layout Updates** → **Add Layout Update**
    - Select the page type (CMS Page, Category, Product, etc.)
    - Choose the container (e.g., Main Content Area, Sidebar)
6. Click **Save**

### Programmatic Usage

[](#programmatic-usage)

You can also use the slider widget block directly in your templates:

```