sulaimandauda

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:
<ul>
<li>Small frontend assets — streamlined JavaScript and CSS for frontend rendering</li>
<li>Zero jQuery — no jQuery dependency, not even transitively</li>
<li>Gutenberg native — configure everything inside the block editor, no admin pages</li>
<li>9 presets — Default, Hero, Gallery, Cards, Testimonials, Fullscreen, Logo Carousel, Coverflow, Fade</li>
<li>6 transition effects — Slide, Fade, Scale, Parallax, Coverflow, Flip with smooth scroll-based animations</li>
<li>5 arrow styles — Default, Rounded, Minimal, Outline, Circle</li>
<li>5 arrow positions — Sides, Bottom Right, Bottom Left, Bottom Center, Outside</li>
<li>5 pagination styles — Dots, Lines, Dashes, Numbers, Outline</li>
<li>3 pagination positions — Bottom, Right, Left</li>
<li>Progress bar — thin scroll-based progress indicator</li>
<li>Slide counter — shows current/total slide count (e.g. 1 / 5)</li>
<li>Navigation colours — customise arrow background, arrow icon, dot, and active dot colours</li>
<li>Responsive breakpoints — desktop, tablet (≤ 1024 px), and mobile (≤ 768 px) slides per view</li>
<li>Settings & Styles tabs — organised into Settings (Preset, Layout, Playback) and Styles (Effects, Navigation, Colors) tabs</li>
<li>Accessible — full keyboard navigation, screen reader announcements, reduced motion support</li>
<li>Developer friendly — PHP filter (<code>extrnd_block_slider_options</code>) and JS hooks (<code>extrndSlider.options</code>, <code>extrndSlider.init</code>, <code>extrndSlider.slideChange</code>)</li>
<li>Block transforms — convert Gallery, Group, or multi-selected blocks to/from Slider</li>
<li>Lazy initialisation — sliders below the fold only initialise when scrolled into view</li>
<li>Dynamic rendering — PHP render callback ensures future-proof output with zero block validation errors</li>
</ul>
Presets:
<ul>
<li>Default — standard full-width slider</li>
<li>Hero — 80 vh feature banner with fade transition</li>
<li>Gallery — multi-slide with 16 px gap</li>
<li>Cards — 3 visible slides with 24 px gap</li>
<li>Testimonials — centred single testimonial</li>
<li>Fullscreen — edge-to-edge 100 dvh</li>
<li>Logo Carousel — continuous-scroll brand logos</li>
<li>Coverflow — 3D coverflow effect</li>
<li>Fade — crossfade transitions</li>
</ul>
<h3>Development</h3>
The full uncompiled source code is included in the <code>src/</code> directory. The <code>build/</code> directory contains the compiled assets generated by esbuild. To regenerate the build files from source, run <code>npm install</code> followed by <code>npm run build</code>.
<h3>Third-Party Libraries</h3>
This plugin includes the Embla Carousel library for slider behaviour.
<ul>
<li>Project: Embla Carousel</li>
<li>Repository: https://github.com/davidjerleke/embla-carousel</li>
</ul>

Extrnd Block Slider

Responsive slider blocks for the WordPress editor with navigation controls, layout presets, and accessible frontend output.

Extrnd Block Slider vs Slider, Gallery, and Carousel by MetaSlider – Image Slider, Video Slider