A TYPO3 integration of the Swiper slider — the most modern free and open-source mobile touch slider — built on top of the Content Blocks API.
This extension registers a ready-to-use "Swiper Slider" content element, so editors can create fully responsive, touch-enabled sliders directly from the TYPO3 backend — without writing a single line of code.
- Features
- Requirements
- Installation
- Usage
- Configuration & Customization
- Demos & Documentation
- Support the Project
- License
- Modern Swiper slider — hardware-accelerated transitions, true 1:1 touch movement, responsive out of the box
- Built on Content Blocks — clean, structured content modeling using the official TYPO3 Content Types API
- No code required — editors get a dedicated "Swiper Slider" content element in the backend
- Mobile-first — optimized for touch devices, but works just as well on desktop
- Easily customizable — override Fluid templates, partials and assets in your own site package
- Works standalone or with t3sbootstrap — designed to integrate seamlessly with the t3sbootstrap ecosystem, but not required
| Component | Version |
|---|---|
| TYPO3 | >= 14.3 |
content_blocks |
>= 2.3.5 |
| PHP | as required by your TYPO3 version |
Note on TYPO3 v14: Content Blocks
2.xis required for TYPO3 v14. Make sure yourcontent_blocksconstraint matches your Core version.
In your Composer-based TYPO3 project root, run:
composer require t3s/t3s-swiperThen activate the extension and flush the caches:
vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush- Make sure the dependency
content_blocksis installed first. - Download and install
t3s_swipervia the Extension Manager in the TYPO3 backend. - Flush all caches.
Once the extension is installed and activated, a new content element "Swiper Slider" becomes available in the "New Content Element" wizard.
- Open the desired page in the backend.
- Click "Create new content element" and choose Swiper Slider.
- Add your slides, configure the slider options, and save.
- View the result in the frontend — the slider is rendered automatically with all required JS and CSS assets.
Because t3s_swiper is built on Content Blocks, all customization follows the standard Content Blocks conventions:
- Templates — Override Fluid templates by copying them from
EXT:t3s_swiper/ContentBlocks/.../templates/into your own site package. - Assets — CSS and JS are registered through the Content Blocks asset mechanism and can be replaced or extended.
- Fields — Extend the YAML definition in your own Content Block to add fields, or fork the element for project-specific needs.
Refer to the Content Blocks documentation for details on overriding and extending content blocks.
- Live demos & full documentation: https://www.t3sbootstrap.de/extensions/swiper-slider
- Packagist: https://packagist.org/packages/t3s/t3s-swiper
- About Swiper: https://swiperjs.com/
If you find this extension useful, please consider supporting its development:
Bug reports, feature requests and pull requests are very welcome via the issue tracker.
This extension is released under the GPL-2.0-or-later license, in line with the TYPO3 Core. See LICENSE for details.
Swiper is © Vladimir Kharlampidi and licensed under the MIT license.