Content Slider

Content Slider turns any blocks into a slider or carousel — each slide is a container you can fill with images, text, buttons, or whole layouts. It runs on a lightweight, no-jQuery engine (no bundled library), with slide, fade, and coverflow effects, autoplay, arrows, pagination, drag/swipe, and an optional click-to-zoom lightbox.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Content Slider (hover it for a live preview). It drops in with a couple of starter slides. Select a slide and add whatever blocks you want inside it; use the block toolbar to add or remove slides.

Layout

Effect

• Slide — the classic horizontal (or vertical) track
• Fade — slides cross-fade in place
• Coverflow — a 3D, depth-stacked carousel

Orientation switches between Horizontal and Vertical for the slide and coverflow effects.

Slides per view and scrolling

• Slides per view — one slide at a time or several side by side, set per device
• Slides to scroll — how many slides advance per step
• Gap between slides — space separating them
• Slider height — a fixed height for the frame
• Adaptive height — the slider grows and shrinks to fit the current slide instead of holding a fixed height

Behaviour

• Autoplay — with an Autoplay delay, Pause on hover, and an optional play/pause button for accessibility
• Loop — wrap around from the last slide to the first
• Draggable / swipe — pointer and touch dragging, on by default
• Transition speed — how fast each slide animates
• Lightbox on click — images inside slides open in a full-screen zoom view, with arrow-key and Esc navigation

Navigation

• Show arrows — previous/next controls, with Arrow side spacing to push them in or out from the edge
• Show pagination — choose Dots, a Fraction (2 / 6), or a Progress bar
• Spacing above pagination — the gap between the slides and the pagination row
• Space between dots — dot-to-dot spacing

Arrow and dot colors live in Styles, not here.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the slider does; Styles is how it looks, organised by the parts you can see.

Styling

Rows marked with a state selector carry extra states — pick the state at the top of the row and set a value for it.

The block supports Wide and Full alignment from the toolbar and an HTML anchor. Motion is disabled automatically when the visitor prefers reduced motion.

HTML output

<div
  class="ab-slider ab-slider--slide ab-slider--vertical"
  style="--ab-slider-gap: 24px; --ab-slider-arrow-color: #ffffff; --ab-slider-arrow-bg: #111111; --ab-slider-dot-active: #7c3aed;"
  data-effect="slide"
  data-orientation="vertical"
  data-per-view="3"
  data-per-view-tablet="2"
  data-per-view-mobile="1"
  data-scroll="1"
  data-pagination="bullets"
  data-adaptive="1"
  data-slide-speed="400"
  data-autoplay="1"
  data-loop="1"
>
  <div class="ab-slider__viewport">
    <div class="ab-slider__track">
      <!-- each slide renders your inner blocks -->
    </div>
  </div>
  <!-- arrows + pagination render here -->
</div>

The ab-slider--slide|fade|coverflow and ab-slider--vertical modifier classes drive the effect and orientation; behavior is read from data-* attributes by the view script. Each slide keeps its own inner-block markup.

CSS custom properties