Skip to content

Latest commit

 

History

History
66 lines (51 loc) · 3.65 KB

USAGE.md

File metadata and controls

66 lines (51 loc) · 3.65 KB

Usage Guide

Block Configuration

Parent Block: carousel-kit/carousel

The parent block acts as the controller and wrapper. It handles configuration, state, and context for all child blocks.

Attributes

Attribute Type Default Description
loop boolean false Infinite scrolling.
dragFree boolean false Momentum scrolling.
carouselAlign string 'start' Slide alignment (start, center, end).
containScroll string 'trimSnaps' Prevents whitespace at ends.
allowedSlideBlocks array [] List of block names allowed inside slides.
autoplay boolean false Enable autoplay.
autoplayDelay number 4000 Delay in ms.
autoplayStopOnInteraction boolean true Stop on user touch/click.
autoplayStopOnMouseEnter boolean false Stop on hover.
ariaLabel string 'Carousel' Descriptive label for screen readers.
slideGap number 0 Gap between slides in pixels.
axis string 'x' Carousel axis direction ('x' for horizontal, 'y' for vertical).
direction string 'ltr' Carousel item direction: 'ltr' (left-to-right) or 'rtl' (right-to-left).
slidesToScroll number 1 Number of slides to scroll per navigation action.

Patterns & Restrictions

Creating Restricted Carousels

To create a specialized carousel (e.g., testimonials only), set the allowedSlideBlocks attribute on the parent block:

<!-- wp:carousel-kit/carousel {"allowedSlideBlocks":["rt-blocks/testimonial-card"]} -->
    <!-- wp:core/heading {"content":"User Testimonials"} /-->
    <!-- wp:carousel-kit/carousel-viewport -->
        <!-- wp:carousel-kit/carousel-slide -->
            <!-- wp:rt-blocks/testimonial-card /-->
        <!-- /wp:carousel-kit/carousel-slide -->
    <!-- /wp:carousel-kit/carousel-viewport -->
<!-- /wp:carousel-kit/carousel -->

Using Query Loop with Carousel

You can create dynamic post sliders or content carousels using the WordPress Query Loop block.

Setup Steps

  1. Add the Carousel block to your page.
  2. Select the inner Carousel Viewport block.
  3. Insert a Query Loop block inside the Viewport (instead of a Carousel Slide).
  4. Configure your query (post type, category, order, etc). Disable "Inherit query from template" if using on single posts/pages to avoid loop conflicts.
  5. Design your slide inside the Query Loop's Post Template.

Note: Each post generated by the Query Loop becomes an individual slide. The system automatically detects .wp-block-post-template and forces horizontal flex row display. The slideGap attribute controls spacing.

Block Selection Guide

Use Case Recommended Block
Dynamic Content (Posts, Pages, Products, Custom Post Types) Query Loop (core/query)
Static Content (Hero Slider, Logo Showcase, Manual Testimonials) Carousel Slide (carousel-kit/carousel-slide)
Mixed Content (Slide 1 is a Video, Slide 2 is Text) Carousel Slide (carousel-kit/carousel-slide)