Beskrivelse

A responsive carousel slider for the Gutenberg block editor that lets you add any blocks to your slides.

🚀 Carousel Slider Version 2 is here! Now powered by Swiper.js for a smoother, faster, and more modern experience. See below for update instructions.

Funktioner

Add unlimited slides
Tilføj enhver blok til slidene
Forhåndsvis karrusellen i editoren
Responsiv og berørings aktiveret

Indstillinger

Slide pr. visning
Slide skiftes ad gangen
Hastighed af slide skift
Slide indre margin
Forrige/næste pile
Navigation med prikker
Uendelig sløjfe af slidene
Automatisk afspilning
Responsive indstillinger: antal slide, der skal vises ved en given skærmstørrelse
HMV <-

Systemkrav

PHP 5.6+ anbefales, WordPress 5.8+, med Gutenberg aktiv.

Dokumentation

Vælg blokken Slide-karrusel fra kategorien Design. Klik på + knappen for enden af karrusellen for at tilføje slide. Tilføj en vilkårlig blok i sliden. Brug den vandrette rullebjælke til at få vist slidene i editoren.

Du kan ændre rækkefølgen af slidene ved at bruge pileknapperne til venstre og højre i værktøjslinjen.

For at fjerne en slide, skal du vælge sliden og klikke på de tre prikker (kebab) lige over det. Klik på indstillingen Fjern Slide for at fjerne det pågældende slide.

Klik på karruselblokken (blokken, der indlejrer alle slide) for at vise karruselindstillingerne.

Carousel Slider Version 2

Carousel Slider v2 now uses Swiper.js instead of Slick. It’s more modern, better supported, and works smoother across devices.

Upgrading from Legacy Carousel

Existing legacy (v1) Carousel Slider blocks will still work. You can re-enable them in the admin settings under Settings Carousel Slider.
To upgrade, click on a legacy Carousel Slider block in the editor. In the block’s toolbar (the floating bar that appears above the block), click the block icon (first button on the left). From the dropdown, choose “Transform to Carousel Slider v2”. Your existing carousel settings will be preserved, but note that the design and HTML markup will change.
Legacy styles will not apply to v2. You may need to adjust custom CSS.

Optional: Re-enable Legacy Blocks

You can show/hide legacy blocks from the block inserter and disable v2 upgrade notices via Settings Carousel Slider in the admin menu.

Note: Legacy blocks will continue to function, but are no longer supported. It is highly recommended to upgrade to v2 for continued improvements and compatibility.

Customizing v2 Styles

Carousel Slider v2 supports custom styling via CSS variables:

Navigation

--wp--custom--carousel-block--navigation-size: Arrow size
--wp--custom--carousel-block--navigation-sides-offset: Distance from edge
--wp--custom--carousel-block--navigation-color: Arrow color
--wp--custom--carousel-block--navigation-alignfull-color: Arrow color when the carousel is full width

Pagination (dots)

--wp--custom--carousel-block--pagination-top: Top offset for pagination
--wp--custom--carousel-block--pagination-bullet-size: Dot size
--wp--custom--carousel-block--pagination-bullet-color: Dot color (inactive)
--wp--custom--carousel-block--pagination-bullet-active-color: Dot color (active)
--wp--custom--carousel-block--pagination-bullet-opacity: Dot opacity (inactive)
--wp--custom--carousel-block--pagination-bullet-active-opacity: Dot opacity (active)
--wp--custom--carousel-block--pagination-bullet-horizontal-gap: Horizontal spacing between dots
--wp--custom--carousel-block--pagination-bullet-vertical-gap: Vertical spacing between dots

Block spacing

--wp--custom--carousel-block--image-margin-top: Top spacing for image blocks
--wp--custom--carousel-block--image-margin-bottom: Bottom spacing for image blocks
--wp--custom--carousel-block--cover-margin-top: Top spacing for cover blocks
--wp--custom--carousel-block--cover-margin-bottom: Bottom spacing for cover blocks

Note: The CSS variables use the WordPress --wp--custom-- prefix, allowing you to override them in your theme’s theme.json for site-wide styling.

Skærmbilleder

Slide-karrusel
Tilføj enhver blok til slidene i karrusellen
Karrusel-indstillinger

Blokke

Dette plugin giver 2 blokke.

Carousel Slider v2 Display a carousel with any blocks in the slides.
Slide A single slide within the carousel.

Installation

Gå til Plugins -> Tilføj nyt i dit WordPress-Kontrolpanel.
Søg efter Carousel Slider Block i feltet Søg efter plugins.
Klik på Installer nu for at installere plugin’et Slide-karruselblok.
Klik på Aktivér for at aktivere plugin’et.
Slide-karruselblokken vil blive tilføjet til gruppen Design-blokke i editoren

Hvis du stadig har brug for hjælp, kan du besøge WordPress codex

FAQ

Hvad er Gutenberg?: Gutenberg er navnet på den nye blokbaserede editor, der blev introduceret i WordPress 5. Gutenberg gør det nemt at oprette indhold i editoren ved hjælp af blokke.
Hvordan tilføjer jeg en karrusel til WordPress?: Vælg blokken Slide-karrusel fra kategorien Design.
Hvordan tilføjer jeg en slide til WordPress?: Vælg blokken Slide-karrusel. Klik på + knappen for at tilføje slide til karrusellen.

Anmeldelser

Aurovrata Venet 6. september, 2025

Thank you for a great little plugin. It handles slides really well and the block settings are intuitive and allows for a lot of style variations and layouts. I have a few ideas on how to further improve it. Is is on GitHub? I’d like to do a PR to contribute some code. Some ideas for improvement: – allow the slides to pause on mouse hover over the arrows or pagination dots. – enable custom navigation by allowing a custom element with the right css to listen for click events.

pharrisonw 16. juli, 2025

This slider operates as a block inserted on a page/post. It them accepts other Gutenberg blocks, (text, image, header, etc.) as content for the slider. All controls for the slider are on the block itself. Save as a pattern to repeat the configured slider on other pages.This is a very simple yet flexible plugin. Highly recommended

annaise 6. juni, 2025

I love how simple and straightforward it is. The block is really versatile. Support was great too when I made a post!

efficiondave 3. maj, 2025

A great and simple plug-in. Exactly what I wanted.

BobRebus 24. marts, 2025

Does what it says. Simple and practical, easy to use. Thank you for creating this!

samuele99 14. marts, 2025

Incredible flexibility, it integrates perfectly into the current Gutenberg blocks pool for its functionality and layout. I noticed that the support is somewhat missing, probably because the developer is alone in this. It would be great if the community could help maintaining this so useful piece of code for as long as possible.

Læs alle 49 anmeldelser

Bidragsydere & udviklere

“Carousel Slider Block for Gutenberg” er open source-software. Følgende personer har bidraget til dette plugin.

Virgildia

“Carousel Slider Block for Gutenberg” er blevet oversat til 11 sprog. Tak til oversætterne for deres bidrag.

Oversæt “Carousel Slider Block for Gutenberg” til dit eget sprog.

Interesseret i udvikling?

Gennemse koden, tjek SVN repository, eller abonner på udviklerloggen via RSS.

Ændringslog

1.0.0

Første udgave af plugin’et.

1.0.1

Lodash-problem rettet.

1.0.2

Opdateringer til den seneste WP Gutenberg-version. Rettet editor CSS.

1.0.3

Tilføjet indstillinger for Automatisk afspilning.

1.0.4

Forbedret brugergrænsefladeoplevelse ved at bruge kontrolelementer i indre blokke. Tilføjet HMV mulighed. Fjernede mulighed for indre margin. Opdateret siden slide-ikon.

1.0.5

Tilføjet block.json. Forbedret layout af karruselblok i editoren. Opdateret ikon for slideblok. Testet til WordPress 5.9.

1.0.6

Elimineret CSS-problem med blokmargin i slide
Ændret stilen på knappen “Tilføj Slide”.

1.0.7

Added responsive setting for slides to scroll at a time.

1.0.8

Small CSS improvements in the editor. Updated slick CSS stylesheet handle. Tested on WordPress 6.0.

1.0.9

Fixed error message on Widget Editor screen. Tested on WordPress 6.3.1.

1.0.10

Fixed lodash error with latest WordPress 6.4 update.

1.0.11

Fixed layout issue in rows.
Code refactoring.

1.0.12

Added tag dependency.

1.0.13

Reverted Slick init to working solution – outside the WP block build process.

1.0.14

Update CSS for image block centering.

1.0.15

Button block appender fix.

1.0.16

Fix slider init.

2.0.0

Introduced Carousel Slider v2 built on Swiper.js
Legacy blocks are still supported but can be upgraded to v2 via block transforms
Added settings to hide legacy blocks and legacy upgrade notices

2.0.1

Changed legacy block setting to “Show legacy blocks”, disabled by default.
CSS update for pagination margin.

2.0.2

Added custom CSS variable for pagination bullet gap
Corrected documentation for navigation color variable
Removed unnecessary max-width property blocking inner block widths in editor

2.0.3

Removed block.json from legacy blocks

2.0.4

Fix for hide legacy option
Update plugin description

2.0.5

Fix for block inserters