About this plugin
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