Home

    DEMO

    Swiper
    CHOICES.JS
    LightBox
    Masonry
    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

    #

    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.

    #

    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