Extrnd Block Slider

Description

Extrnd Block Slider adds a slider block for the WordPress editor with responsive layout controls, navigation options, and accessible frontend output. It uses the Embla Carousel library for touch-friendly scrolling and does not require jQuery.

Key Features:

• Small frontend assets — streamlined JavaScript and CSS for frontend rendering
• Zero jQuery — no jQuery dependency, not even transitively
• Gutenberg native — configure everything inside the block editor, no admin pages
• 9 presets — Default, Hero, Gallery, Cards, Testimonials, Fullscreen, Logo Carousel, Coverflow, Fade
• 6 transition effects — Slide, Fade, Scale, Parallax, Coverflow, Flip with smooth scroll-based animations
• 5 arrow styles — Default, Rounded, Minimal, Outline, Circle
• 5 arrow positions — Sides, Bottom Right, Bottom Left, Bottom Center, Outside
• 5 pagination styles — Dots, Lines, Dashes, Numbers, Outline
• 3 pagination positions — Bottom, Right, Left
• Progress bar — thin scroll-based progress indicator
• Slide counter — shows current/total slide count (e.g. 1 / 5)
• Navigation colours — customise arrow background, arrow icon, dot, and active dot colours
• Responsive breakpoints — desktop, tablet (≤ 1024 px), and mobile (≤ 768 px) slides per view
• Settings & Styles tabs — organised into Settings (Preset, Layout, Playback) and Styles (Effects, Navigation, Colors) tabs
• Accessible — full keyboard navigation, screen reader announcements, reduced motion support
• Developer friendly — PHP filter (extrnd_block_slider_options) and JS hooks (extrndSlider.options, extrndSlider.init, extrndSlider.slideChange)
• Block transforms — convert Gallery, Group, or multi-selected blocks to/from Slider
• Lazy initialisation — sliders below the fold only initialise when scrolled into view
• Dynamic rendering — PHP render callback ensures future-proof output with zero block validation errors

Presets:

• Default — standard full-width slider
• Hero — 80 vh feature banner with fade transition
• Gallery — multi-slide with 16 px gap
• Cards — 3 visible slides with 24 px gap
• Testimonials — centred single testimonial
• Fullscreen — edge-to-edge 100 dvh
• Logo Carousel — continuous-scroll brand logos
• Coverflow — 3D coverflow effect
• Fade — crossfade transitions

Development

The full uncompiled source code is included in the src/ directory. The build/ directory contains the compiled assets generated by esbuild. To regenerate the build files from source, run npm install followed by npm run build.

Third-Party Libraries

This plugin includes the Embla Carousel library for slider behaviour.

• Project: Embla Carousel
• Repository: https://github.com/davidjerleke/embla-carousel