外掛標籤
開發者團隊
原文外掛簡介
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
