=== HalloWebsite Carousel for List or Group ===
Contributors: hallowebsite
Tags: carousel, kadence, gutenberg, list, group
Requires at least: 6.0
Tested up to: 6.6
Stable tag: 1.6.0
License: GPLv2 or later

Turns selected Kadence/Gutenberg DOM blocks into a lightweight carousel without rewriting your block content.

== How it works ==
The plugin looks for one of these trigger classes on the page:

- carousel-list
- carousel-group

Important: add the trigger class to the carousel container, not to every item.

== List carousel ==
Use this when your slides are list items.

In the block editor:
1. Select the List block.
2. Open Advanced.
3. Add this class under Additional CSS class(es):
   carousel-list

Each direct <li> item becomes one slide.

Example:
<ul class="wp-block-list carousel-list">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
</ul>

With responsive column overrides:
<ul class="wp-block-list carousel-list carousel-d4 carousel-t2 carousel-m1">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <li>Slide 4</li>
</ul>

== Group carousel ==
Use this when every slide should contain richer block content, for example image, heading, text and button.

In the block editor:
1. Add one outer/parent Group block.
2. Inside it, add one Group block for each slide.
3. Select the outer/parent Group block.
4. Open Advanced.
5. Add this class under Additional CSS class(es):
   carousel-group

Do not add carousel-group to every slide group. The parent gets carousel-group. The direct child groups become the slides.

Expected structure:
<div class="wp-block-group carousel-group">
  <div class="wp-block-group__inner-container">
    <div class="wp-block-group">Slide 1 content</div>
    <div class="wp-block-group">Slide 2 content</div>
    <div class="wp-block-group">Slide 3 content</div>
  </div>
</div>

With responsive column overrides:
<div class="wp-block-group carousel-group carousel-d3 carousel-t2 carousel-m1">
  <div class="wp-block-group__inner-container">
    <div class="wp-block-group">
      <h3>Slide 1</h3>
      <p>Text, image, buttons or other blocks.</p>
    </div>
    <div class="wp-block-group">
      <h3>Slide 2</h3>
      <p>Text, image, buttons or other blocks.</p>
    </div>
    <div class="wp-block-group">
      <h3>Slide 3</h3>
      <p>Text, image, buttons or other blocks.</p>
    </div>
  </div>
</div>

== Per-carousel overrides ==
Add these classes on the same element that has carousel-list or carousel-group.

Desktop columns:
- carousel-d1 ... carousel-d6

Tablet columns:
- carousel-t1 ... carousel-t4

Mobile columns:
- carousel-m1 ... carousel-m2

Examples:
<ul class="wp-block-list carousel-list carousel-d4 carousel-t2 carousel-m1">...</ul>
<div class="wp-block-group carousel-group carousel-d3 carousel-t2 carousel-m1">...</div>


== Carousel Slide Link ==
Select an inner Group block that acts as a carousel slide. In the editor sidebar, open "Carousel Slide Link" and enter a URL. The complete slide becomes clickable on the frontend. Existing buttons, links and form fields inside the slide keep their normal behavior. Dragging and mouse-wheel carousel navigation do not trigger the link.

== Endless loop ==
Enable Endless loop in Settings > HalloWebsite Carousel if arrows, mouse wheel and autoplay should wrap from the last slide to the first slide.

== Mouse wheel ==
Mouse-wheel carousel navigation is disabled by default. With the default setting, visitors can scroll the website normally while the pointer is over the carousel. Enable Mouse-wheel carousel scrolling in Settings > HalloWebsite Carousel if the mouse wheel should move the carousel instead.

== Autoplay ==
Enable global autoplay in Settings > HalloWebsite Carousel, or add an autoplay class to the same element that has carousel-list or carousel-group. Class-based autoplay overrides the global interval for that carousel.

Default autoplay interval:
- carousel-autoplay

This slides automatically every 5 seconds.

Custom autoplay interval in seconds:
- carousel-autoplay-3
- carousel-autoplay-5
- carousel-autoplay-10
- carousel-autoplay-15

You can use any whole number from 1 to 60. The number means seconds.

Examples:
<ul class="wp-block-list carousel-list carousel-autoplay-5">...</ul>
<div class="wp-block-group carousel-group carousel-autoplay-8">...</div>

With responsive column overrides:
<ul class="wp-block-list carousel-list carousel-d4 carousel-t2 carousel-m1 carousel-autoplay-5">...</ul>
<div class="wp-block-group carousel-group carousel-d3 carousel-t2 carousel-m1 carousel-autoplay-10">...</div>

Autoplay speed can be changed globally in Settings > HalloWebsite Carousel. Lower milliseconds are faster, higher milliseconds are slower.

Autoplay behavior:
- Pauses on mouse hover
- Pauses while keyboard focus is inside the carousel
- Pauses when the browser tab is inactive
- Respects prefers-reduced-motion and does not autoplay for visitors who prefer reduced motion

== Cursor behavior ==
The carousel intentionally keeps the normal arrow cursor everywhere. It does not use custom SVG cursors, grab cursors, or hand/pointer cursors.

== Settings ==
Go to Settings > HalloWebsite Carousel for List or Group.

Available global defaults:
- Columns Desktop
- Columns Tablet
- Columns Mobile
- Gap (px)
- Move per Click: 1 card, 2 cards, 3 cards or all visible cards

Global settings apply to all carousels unless a carousel has its own override classes.

== Features ==
- Works with normal Gutenberg/Kadence List blocks
- Works with Group blocks as slide containers
- Prev/Next arrows
- Dots
- Native touch scrolling
- Desktop mouse drag
- Mouse wheel navigation
- Scroll snapping
- No horizontal scrollbar
- Optional autoplay via classes such as carousel-autoplay or carousel-autoplay-5
- DOM-safe: no innerHTML rewrites and no cloned slides

== Troubleshooting ==
Nothing happens:
- Check that the class is on the correct block.
- For lists, the class must be on the <ul> list block.
- For groups, the class must be on the outer/parent Group block.
- For group carousels, the slides must be direct child Group blocks inside the parent Group.

Only one slide appears:
- Check your responsive column settings and override classes.
- On mobile, carousel-m1 means one visible slide, which is usually correct.

Group carousel does not find slides:
- Make sure the child slides are Group blocks, not just paragraphs/images placed directly inside the parent.
- Structure should be: parent Group > inner container > child Group > slide content.

== Changelog ==

= 1.6.0 =
- Added a setting to enable/disable mouse-wheel carousel navigation. It is disabled by default so the website scrolls normally.
- Added global autoplay enable, interval and animation speed settings.
- Kept existing per-carousel autoplay classes such as carousel-autoplay-5.

= 1.5.4 =
- Removed all custom SVG cursor settings and frontend overlay code.
- Forced the normal arrow cursor inside the carousel, including linked slides, nav arrows and dots.
- Kept the endless-loop arrow navigation changes from the previous build.

= 1.3.6 =
- Added autoplay support with classes such as carousel-autoplay and carousel-autoplay-5.
- Added autoplay documentation and examples to the readme and plugin settings screen.
- Autoplay pauses on hover, focus and inactive tabs, and respects prefers-reduced-motion.

= 1.3.5 =
- Added clearer documentation for list and group carousel usage.
- Added examples to the plugin settings screen.
- Clarified that carousel-group belongs on the parent Group block only.

= 1.3.4 =
- Existing carousel functionality.
