Title: Extrnd Block Slider Author: sulaimandauda Published: April 9, 2026 Last modified: April 9, 2026 --- Search plugins ![](https://ps.w.org/extrnd-block-slider/assets/banner-772x250.png?rev=3502719) ![](https://ps.w.org/extrnd-block-slider/assets/icon-256x256.png?rev=3502719) # Extrnd Block Slider By [sulaimandauda](https://profiles.wordpress.org/sulaimandauda/) [Download](https://downloads.wordpress.org/plugin/extrnd-block-slider.1.1.0.zip) * [Details](https://wordpress.org/plugins/extrnd-block-slider/#description) * [Reviews](https://wordpress.org/plugins/extrnd-block-slider/#reviews) * [Installation](https://wordpress.org/plugins/extrnd-block-slider/#installation) * [Development](https://wordpress.org/plugins/extrnd-block-slider/#developers) [Support](https://wordpress.org/support/plugin/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 ## Screenshots * [[ * Slider block in the Gutenberg editor * [[ * Inspector panel with slider settings * [[ * Frontend rendering with arrows and dots * [[ ## Installation 1. Upload the `extrnd-block-slider` folder to `/wp-content/plugins/` 2. Activate the plugin through the Plugins menu in WordPress 3. In the block editor, add an “Extrnd Slider” block 4. Add Slide blocks inside the slider 5. Configure settings in the block sidebar panel ## FAQ ### Does this require jQuery? No. Extrnd Block Slider has no jQuery dependency. It uses the Embla Carousel library for slider behaviour. ### Can I use this with Full Site Editing? Yes. Extrnd Block Slider is compatible with the WordPress Site Editor and block themes. ### How do I customise slider options programmatically? Use the PHP filter `extrnd_block_slider_options` or the JavaScript filter `extrndSlider. options` via `@wordpress/hooks`. ### Does it work without JavaScript? Yes. Without JavaScript, slides stack vertically and navigation elements are hidden via CSS. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Extrnd Block Slider” is open source software. The following people have contributed to this plugin. Contributors * [ sulaimandauda ](https://profiles.wordpress.org/sulaimandauda/) [Translate “Extrnd Block Slider” into your language.](https://translate.wordpress.org/projects/wp-plugins/extrnd-block-slider) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/extrnd-block-slider/), check out the [SVN repository](https://plugins.svn.wordpress.org/extrnd-block-slider/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/extrnd-block-slider/) by [RSS](https://plugins.trac.wordpress.org/log/extrnd-block-slider/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.0 * Live preview mode in the block editor now renders a real slider instance in the editor (slide and fade effects) * Editor preview accurately reflects loop, speed, slides-per-view, and spacing settings #### 1.0.0 * Initial release * 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 for scroll-based progress indication * Slide counter showing current/total slide count * Navigation colour controls (arrow background, arrow icon, dot colour, active dot colour) * Responsive breakpoints (desktop, tablet, mobile) * Settings & Styles tab organisation in the block editor * Block transforms: Gallery, Group, multi-block to/from Slider * Block patterns: Hero Slider, Testimonial Carousel, Logo Carousel * Slide visibility toggle (hide on frontend) * Developer hooks: PHP filters and JS actions * Full keyboard and screen reader accessibility * Lazy IntersectionObserver initialisation * No-JS progressive enhancement ## Meta * Version **1.1.0** * Last updated **4 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **6.9.4** * PHP version ** 8.1 or higher ** * Tags * [accessibility](https://wordpress.org/plugins/tags/accessibility/)[block](https://wordpress.org/plugins/tags/block/) [carousel](https://wordpress.org/plugins/tags/carousel/)[gutenberg](https://wordpress.org/plugins/tags/gutenberg/) [slider](https://wordpress.org/plugins/tags/slider/) * [Advanced View](https://wordpress.org/plugins/extrnd-block-slider/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/extrnd-block-slider/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/extrnd-block-slider/reviews/) ## Contributors * [ sulaimandauda ](https://profiles.wordpress.org/sulaimandauda/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/extrnd-block-slider/)