# Slide Crafter Reborn — User Guide

*Version 2.0.0*

## Create a slider
1. **Slides → Add New Slide**, give it a title.
2. Pick a **data source**: manual HTML cards, latest WordPress posts, or WooCommerce featured products.
3. Add cards. Use **Insert a template** for a ready-made card, **Image** to pick a picture from the media library (it replaces the card's first image, or inserts one), drag the handle to reorder.
4. Adjust the settings in the sidebar. The **live preview** is rendered by the same code as the public site; use the Desktop / Tablet / Mobile buttons to check each layout.
5. **Save slider** (or Ctrl/⌘ + S). Copy the shortcode, or use the *Slide Crafter* block.

## Responsive behaviour
Cards per view is set separately for desktop, tablet and mobile. Breakpoints follow the **width of the slider itself** (under 560 px = mobile, 560–899 px = tablet), so a slider in a narrow column behaves like on a small screen. Effects that show one card at a time (fade, cube, flip, stacked cards) always show exactly one.

## Looks
*Clean*, *Classic* (the original framed look, kept for existing sliders) and *Dark*. Pick an accent colour, or restyle from your theme:
```css
.scr-slider { --scr-accent: #c2185b; --scr-radius: 8px; }
```

## Custom CSS
Rules apply inside the cards of that slider only. `.title { color: red; }` styles `.title` inside each card; `& { border-radius: 16px; }` (or plain declarations) styles the card wrapper. Only a whitelist of properties is accepted (shown under the field).

## Accessibility
Labelled region, native arrow buttons, keyboard arrows when the slider has focus, autoplay pauses on hover / focus / when off-screen and has a pause button; it is disabled when the visitor prefers reduced motion.

## Developers
Filters: `slidecrafterreborn_max_cards`, `slidecrafterreborn_cards`, `slidecrafterreborn_slider_config`, `slidecrafterreborn_card_allowed_html`, `slidecrafterreborn_allowed_css_properties`. JS: `SlideCrafterReborn.init(el)`, `.destroy(el)`, `.initAll(context)`.