PHPackages lindemannrock/craft-slideshow-manager - 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. lindemannrock/craft-slideshow-manager ActiveCraft-plugin[Utility & Helpers](/categories/utility) lindemannrock/craft-slideshow-manager ===================================== Comprehensive slideshow management field with Swiper.js integration for Craft CMS 5.10.0(2mo ago)07proprietaryTwigPHP ^8.2CI passing Since Oct 15Pushed 2mo ago1 watchersCompare [ Source](https://github.com/LindemannRock/craft-slideshow-manager)[ Packagist](https://packagist.org/packages/lindemannrock/craft-slideshow-manager)[ RSS](/packages/lindemannrock-craft-slideshow-manager/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (24)Used By (0) Slideshow Manager for Craft CMS =============================== [](#slideshow-manager-for-craft-cms) [![Latest Version](https://camo.githubusercontent.com/274d122e53d968feb6cb1a91ce82c8435f96eb5f153ba994023f133ba5f11174/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6c696e64656d616e6e726f636b2f63726166742d736c69646573686f772d6d616e616765722e737667)](https://packagist.org/packages/lindemannrock/craft-slideshow-manager)[![Craft CMS](https://camo.githubusercontent.com/21f96a88b167fb3d44f5353f9cd480b0311e4612eb2bef7725ecfc09a8b0b8d7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4372616674253230434d532d352e302532422d6f72616e67652e737667)](https://craftcms.com/)[![PHP](https://camo.githubusercontent.com/0f16581d1180dbfd4c0e13166ec1267d4ad2f2fab8281ea6d6b284cf5c65d921/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d626c75652e737667)](https://php.net/)[![Logging Library](https://camo.githubusercontent.com/6f3321d27476dcc0d5ac1f9605d706f24b1d035a73871acbb599d376424d03a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6f6767696e672532304c6962726172792d352e302532422d677265656e2e737667)](https://github.com/LindemannRock/craft-logging-library)[![License](https://camo.githubusercontent.com/17121c96f428300ac0a5ddece405ba10b3c13c16411085b72d6f7f112826774c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6c696e64656d616e6e726f636b2f63726166742d736c69646573686f772d6d616e616765722e737667)](LICENSE) A comprehensive slideshow management plugin with Swiper.js integration for Craft CMS 5.x. License ------- [](#license) This is a commercial plugin licensed under the [Craft License](https://craftcms.github.io/license/). It will be available on the [Craft Plugin Store](https://plugins.craftcms.com) soon. See [LICENSE.md](LICENSE.md) for details. ⚠️ Pre-Release -------------- [](#️-pre-release) This plugin is in active development and not yet available on the Craft Plugin Store. Features and APIs may change before the initial public release. Table of Contents ----------------- [](#table-of-contents) - [Slideshow Manager for Craft CMS](#slideshow-manager-for-craft-cms) - [Table of Contents](#table-of-contents) - [Quick Start](#quick-start) - [Features](#features) - [Requirements](#requirements) - [Installation](#installation) - [Via Composer](#via-composer) - [Using DDEV](#using-ddev) - [Via Control Panel](#via-control-panel) - [Custom Swiper Installation](#custom-swiper-installation) - [Option 1: Using npm (Recommended for Production)](#option-1-using-npm-recommended-for-production) - [Option 2: Using CDN (Default)](#option-2-using-cdn-default) - [Option 3: Custom CDN or Version](#option-3-custom-cdn-or-version) - [Configuration](#configuration) - [Plugin Settings](#plugin-settings) - [General Settings](#general-settings) - [Swiper Configuration Tabs](#swiper-configuration-tabs) - [Config File](#config-file) - [Environment-Specific Configuration](#environment-specific-configuration) - [Usage](#usage) - [Field Types](#field-types) - [Slideshow Config Field](#slideshow-config-field) - [Global Settings](#global-settings) - [Template Usage](#template-usage) - [Basic Slideshow](#basic-slideshow) - [With Debug Logging](#with-debug-logging) - [With Runtime Overrides](#with-runtime-overrides) - [With Visibility Classes](#with-visibility-classes) - [Template Variables](#template-variables) - [`settings`](#settings) - [`buildSwiperConfig(config, sliderId)`](#buildswiperconfigconfig-sliderid) - [`buildCssVars(cssVars)`](#buildcssvarscssvars) - [`initSlider(sliderId, overrides, debug)`](#initslidersliderid-overrides-debug) - [`getVisibilityClasses(visibility)`](#getvisibilityclassesvisibility) - [CSS Custom Properties](#css-custom-properties) - [Available CSS Variables](#available-css-variables) - [Theme](#theme) - [Navigation](#navigation) - [Pagination](#pagination) - [Scrollbar](#scrollbar) - [Other](#other) - [Usage Pattern](#usage-pattern) - [Swiper Configuration](#swiper-configuration) - [Examples](#examples) - [Logging](#logging) - [Log Levels](#log-levels) - [Configuration](#configuration-1) - [Log Files](#log-files) - [Log Management](#log-management) - [Troubleshooting](#troubleshooting) - [Slideshow Not Initializing](#slideshow-not-initializing) - [Navigation/Pagination Not Showing](#navigationpagination-not-showing) - [CSS Variables Not Working](#css-variables-not-working) - [Field Not Saving](#field-not-saving) - [Support](#support) - [License](#license) Quick Start ----------- [](#quick-start) Get up and running with Slideshow Manager in 5 minutes: **1. Install the plugin** ``` composer require lindemannrock/craft-slideshow-manager ./craft plugin/install slideshow-manager ``` **2. Configure global settings (optional)** - Go to **Slideshow Manager → Settings** in the Control Panel - Configure default Swiper behavior (navigation, pagination, autoplay, etc.) - Set CSS custom properties for styling **3. Add a field to your section** - Go to **Settings → Fields** - Create a new **"Slideshow Config"** field (for per-entry config) - Add it to your entry type **4. Use in templates** ``` {# Get config from entry field or use global defaults #} {% set config = entry.slideshowConfig ?? craft.slideshowManager.settings.defaultSwiperConfig %} {% set sliderId = 'slider-' ~ random() %} {% set swiperConfig = craft.slideshowManager.buildSwiperConfig(config, sliderId) %} {% set cssVars = craft.slideshowManager.buildCssVars() %} {# Build slideshow - CSS/JS auto-loaded by plugin #} {% for slide in entry.slides %} {{ slide.content }} {% endfor %} {# Navigation/pagination if enabled #} {% if config.navigation %} {% endif %} {% if config.paginationEnabled %} {% endif %} {# Initialize slider - simple one-liner! #} {{ craft.slideshowManager.initSlider(sliderId) }} ``` **That's it!** Your slideshow is live. See [Usage](#usage) for more details and [Examples](docs/EXAMPLES.md) for comprehensive use cases. Features -------- [](#features) - **Automatic Asset Loading**: CSS and JS automatically injected when enabled in settings - **Two Field Types**: Slideshow field (Matrix-based) and Config field (per-entry settings) - **Comprehensive Configuration**: 30+ Swiper options across 5 organized settings tabs - **Per-Entry Customization**: Optional config field for entry-specific slideshow settings - **Responsive Controls**: Breakpoint-based configuration with visual UI - **Visibility Management**: Control navigation/pagination display per device (mobile/desktop) - **CSS Custom Properties**: Full Swiper styling customization via CSS variables - **Config File Overrides**: Environment-specific settings - **Helper Methods**: Simple template methods for initialization and config transformation - **Integrated Logging**: Built-in logging with configurable levels Requirements ------------ [](#requirements) - Craft CMS 5.0.0 or later - PHP 8.2 or later - [Logging Library](https://github.com/LindemannRock/craft-logging-library) 5.0 or greater (installed automatically as dependency) Installation ------------ [](#installation) ### Via Composer [](#via-composer) ``` cd /path/to/project ``` ``` composer require lindemannrock/craft-slideshow-manager ``` ``` ./craft plugin/install slideshow-manager ``` ### Using DDEV [](#using-ddev) ``` cd /path/to/project ``` ``` ddev composer require lindemannrock/craft-slideshow-manager ``` ``` ddev craft plugin/install slideshow-manager ``` ### Via Control Panel [](#via-control-panel) In the Control Panel, go to **Settings → Plugins** and click "Install" for Slideshow Manager. **Note:** Frontend assets are pre-built and included. No build step required for installation. Custom Swiper Installation -------------------------- [](#custom-swiper-installation) By default, the plugin auto-loads Swiper from CDN. However, you can use your own Swiper installation: ### Option 1: Using npm (Recommended for Production) [](#option-1-using-npm-recommended-for-production) **1. Install Swiper via npm:** ``` npm install swiper # or yarn add swiper # or pnpm add swiper ``` **2. Import in your JavaScript:** ``` // Your main JS file (e.g., src/js/app.js) import Swiper from 'swiper'; import { Navigation, Pagination, Autoplay, EffectFade, EffectCube, EffectCoverflow, EffectCards, Grid } from 'swiper/modules'; // Import Swiper styles import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import 'swiper/css/effect-fade'; import 'swiper/css/effect-cube'; import 'swiper/css/effect-coverflow'; import 'swiper/css/effect-cards'; import 'swiper/css/grid'; // Configure Swiper to use modules globally Swiper.use([Navigation, Pagination, Autoplay, EffectFade, EffectCube, EffectCoverflow, EffectCards, Grid]); // Make Swiper globally available window.Swiper = Swiper; ``` **Note:** Only import the modules you need. Available modules include: - `Navigation`, `Pagination`, `Scrollbar` - `Autoplay`, `EffectFade`, `EffectCube`, `EffectFlip`, `EffectCoverflow`, `EffectCards`, `EffectCreative` - `Grid`, `FreeMode`, `Thumbs`, `Parallax`, `Zoom` - `Keyboard`, `Mousewheel`, `HashNavigation`, `History`, `Controller`, `A11y`, `Virtual`, `Manipulation` See [Swiper Modules Documentation](https://swiperjs.com/swiper-api#using-js-modules) for complete details. **3. Disable auto-loading in plugin settings:** Via Control Panel: - Go to **Slideshow Manager → Settings → General** - Disable "Auto Load Swiper CSS" - Disable "Auto Load Swiper JS" Or via config file: ``` // config/slideshow-manager.php return [ 'autoLoadSwiperCss' => false, 'autoLoadSwiperJs' => false, ]; ``` **4. Use the plugin normally:**The `initSlider()` helper will use your bundled Swiper installation automatically. ### Option 2: Using CDN (Default) [](#option-2-using-cdn-default) The plugin auto-loads Swiper from CDN when enabled in settings: - **CSS**: `https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css` - **JS**: `https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js` This is the easiest option but may not be ideal for production due to: - Additional HTTP requests - No control over caching - Dependency on external CDN availability ### Option 3: Custom CDN or Version [](#option-3-custom-cdn-or-version) You can use a different CDN or Swiper version by: 1. Disabling auto-loading in settings 2. Loading Swiper manually in your template: ``` {# In your layout template #} ``` Configuration ------------- [](#configuration) ### Plugin Settings [](#plugin-settings) Settings can be configured in the Control Panel at **Slideshow Manager → Settings**, or via a config file. #### General Settings [](#general-settings) - **Plugin Name**: Customize the plugin display name - **Auto Load Swiper CSS**: Automatically inject Swiper CSS on frontend pages - **Auto Load Swiper JS**: Automatically inject Swiper JS on frontend pages - **Enable Cache**: Cache slideshow data for better performance - **Cache Duration**: How long to cache data (in seconds) - **Log Level**: Logging verbosity (debug, info, warning, error) #### Swiper Configuration Tabs [](#swiper-configuration-tabs) - **Basic Settings**: Navigation, pagination, autoplay, effects, loop - **Layout & Responsive**: Slides per view, spacing, grid mode, breakpoints - **Controls**: Keyboard, mousewheel, scrollbar, hash navigation - **Advanced**: Free mode, lazy loading, parallax, zoom, virtual slides ### Config File [](#config-file) Create a `config/slideshow-manager.php` file to override default settings: ``` cp vendor/lindemannrock/craft-slideshow-manager/src/config.php config/slideshow-manager.php ``` ```