---
# DEMO
**URL:** https://modul-r.codekraft.it/demo/
Date: 2026-05-01
Author: Erik
Post Type: page
Summary: # Swiper Transforms native Gutenberg blocks (Galleries, Query Loops, Groups, and Covers) into high-performance, touch-friendly carousels using Swiper.js Available Options / Utility Classes: is-style-slider-gallery slider-gap-30 slider-scrollbar is-style-slider-gallery slider-gap-30 slider-scrollbar # Choices.js Automatically upgrades any native HTML multiple <select> fields into beautifully styled, searchable, and accessible dropdown menus using Choices.js. Available Options: Multiple select input DefaultChoice […]
---
[Swiper](#swiper)
CHOICES.JS
[LightBox](#lightbox)
[Masonry](#masonry)
[Animated](#animated)
### #
### Swiper
Transforms native Gutenberg blocks (Galleries, Query Loops, Groups, and Covers) into high-performance, touch-friendly carousels using Swiper.js
*Available Options / Utility Classes:*
- **Trigger Classes:** Apply `is-style-slider` or `is-style-slider-gallery` to the block.
- **Columns:** Use `columns-{number}` (e.g., `columns-3`) to set how many slides are visible at once. Breakpoints are automatically handled for mobile and tablet.
- **Gap Control:** Use `slider-gap-{number}` (e.g., `slider-gap-30`) to set the spacing between slides in pixels.
- **Fit Height:** Add `slider-fit-height` to make the slider automatically adjust its height to the currently active slide.
- **Fade Effect:** Add `slider-fade` to replace the sliding motion with a smooth cross-fade effect (forces 1 slide per view).
- **Autoplay:** Add `slider-autoplay` to start the carousel automatically.
- **Custom Pagination:** By default, it uses bullets. Add `slider-scrollbar` to replace bullets with a draggable scrollbar, or `slider-hide-nav` to completely remove arrows and pagination.
-
is-style-slider-gallery slider-gap-30 slider-scrollbar
is-style-slider-gallery slider-gap-30 slider-scrollbar
### #
## Choices.js
Automatically upgrades any native HTML multiple `<select>` fields into beautifully styled, searchable, and accessible dropdown menus using Choices.js.
*Available Options:*
- **Trigger:** Automatically applies to any `<select multiple>` element.
- **Remove Button:** Built-in "Remove item" buttons are enabled by default, allowing users to easily clear their multiple selections.
## Multiple select input
DefaultChoice 1Choice 2Choice 3Choice 4With remove buttonChoice 1Choice 2Choice 3Choice 4Option groupsChoose a cityLondonManchesterLiverpool
ParisLyonMarseille
HamburgMunichBerlin
New YorkWashingtonMichigan
MadridBarcelonaMalaga
MontrealTorontoVancouver
### #
### LIGHTBOX (on click)
Provides an immersive, full-screen overlay for viewing high-resolution images and galleries without leaving the page, powered by GLightbox.
*Available Options / Classes:*
- **Single Images:** Apply `is-style-lightbox-image` to any Image block.
- **Galleries:** Apply `is-style-lightbox-gallery` to a Gallery block to create a navigable slideshow.
- **Features:** Touch navigation, infinite loop, and video autoplay are enabled by default. It automatically pulls the image caption or `alt` text to display as the title.
## is-style-lightbox-image
Caption Caption Caption Caption
## is-style-lightbox-gallery
### #
## Masonry gallery (pattern)
Breaks free from rigid grids. This module calculates the perfect position for every item based on its natural height, creating a fluid, gap-free Pinterest-style layout using MiniMasonry.
**Trigger Class:** Apply `is-style-masonry-layout` to the container.
**Column Setup:** Use `columns-{number}`. The module automatically calculates the base width of each column relative to the container, maintaining a minimum card size of 300px and standard 24px gutters.
### #
### LIGHTBOX (on click)
A high-performance Intersection Observer engine that triggers CSS entry animations and dynamic text/number counters as soon as elements scroll into the viewport.
*Available Options / Classes:*
- **Entry Animations:** Use Animate.css classes (e.g., `animate__animated animate__fadeIn`).
- **Animation Modifiers:** Customize the effect using `animate__duration__{ms}` (e.g., `animate__duration__3000`), `animate__delay__{ms}`, or `animate__repeat`.
- **Number Counters:** Add `count__counter` to an element containing a number to animate it counting up from zero. Customize speed with `count__duration__{ms}`.
- **Text/Letter Scramble:** Add `count__letters` or `count__words` to apply a dynamic "scramble" reveal effect to text strings, animating them letter by letter with randomized characters before settling on the final word.
# ANIMATED
animate__animated animate__fadeIn
**1234**
count__counter
## **ANIMATED**
count__counter count__letters
# ANIMATED
animate__animated animate__tada animate__delay__1000 animate__duration__3000
---
## Navigation
- [ModulR](https://modul-r.codekraft.it/)
---
## Footer Links
- [WordPress](https://wordpress.org/)