Carousel Slider Block for Gutenberg

Опис

A responsive carousel slider for the Gutenberg editor that supports adding any blocks to slides.

Features

  • Add unlimited slides
  • Add any blocks to the slides
  • Preview the carousel in the editor
  • Responsive and touch enabled

Settings

  • Slides per view
  • Slides to scroll at a time
  • Slide speed
  • Slide padding
  • Prev/next arrows
  • Dots navigation
  • Infinite loop sliding
  • Autoplay
  • Responsive settings: slides to show and scroll at given screen size
  • RTL

Requirements

PHP 5.6+ is recommended, WordPress 5.8+, with Gutenberg active.

Documentation

Select the Carousel Slider block from the Design category. Click the + button located at the end of the carousel to add slides. Add any block within the slides. Use the horizontal scrollbar to preview the slides in the editor.

You can reorder the slides by using the left and right arrow buttons in the toolbar.

To remove a slide, select the slide and click the three dots right above it. Click the option to remove that slide.

Click the Carousel Block (the block nesting all the slides) to show the carousel settings.

Скріншоти

  • Carousel slider
  • Add any blocks to the carousel slides
  • Carousel settings

Встановлення

  1. From your WordPress dashboard go to Plugins > Add New.
  2. Search for Carousel Slider Block in the Search Plugins box.
  3. Click Install Now to install the Carousel Slider Block Plugin.
  4. Click Activate to activate the plugin.
  5. Carousel Slider Block will be added to the Design block group in the editor.

If you still need help. visit WordPress codex

Часті питання

What is Gutenberg?

Gutenberg is the name of the new block based editor introduced in WordPress 5. Gutenberg makes it easy to create content within the editor using blocks.

How do I add a carousel to WordPress?

Select the Carousel Slider block from the Design category.

How do I add a slide to WordPress?

Select the Carousel Slider block. Click the plus button to add slides to the carousel.

Відгуки

06.04.2024
I just installed this plugin for a simple solution to be able to add any type of block into a slider. It's a very needed feature and really should be a default block in Gutenberg IMO. My compliments to the author on recognizing this need. Unfortunately I found two frustrating issues: Issue 1: If you're already using other types of sliders that rely upon slick.js, there will be css conflicts. This plugin adds a lot of css directly to the slick selectors (ex. .slick-next). The problem is that this will conflict with any other slider using slick.js by overriding its styles. What has to happen here is that the css for this particular slider needs to be limited solely to this block. I hope that the plugin author reads this and makes the change. The main benefit of the plugin is its simplicity. But this issue with the css is an oversight that should be corrected. Issue 2: I've also discovered that this block will not function properly within a default Gutenberg row block or a Kadence Blocks row/section block combination. This is major drawback since using rows/sections is a basic part of using a block editor. I'm using Kadence Blocks and rely upon its row and section blocks for overall design structure. Putting the above issues aside, this is still a very useful block and I hope the author will address these issues I've identified.
18.03.2024
In a future update, I would love to see a SlidesToShow option with decimal intervals allowed. Any way you can make that happen or a workaround to make it work on my site? Thank you for a great plugin!
13.02.2024
Thank you so much for a fab plugin. It was easy to install and popped up straight into my block selector. I did some custom css, added a custom image size and voila, works beautifully! Keep up the great work 😊 PS no custom css or image sizes needed with this plugin, it's just my OCD!
11.12.2023
I searched and found a lot of plain gutenberg sliders, where i can put my own patterns in, but neither of them fixed my needs. Until i found this slider. Awesome features, the use of Slick makes it easy to change the basic behaviour. Just perfect and exactly what i'm looking for. THANK YOU!
Прочитати всі 30 відгуків

Учасники та розробники

“Carousel Slider Block for Gutenberg” — проект з відкритим вихідним кодом. В розвиток плагіну внесли свій вклад наступні учасники:

Учасники

“Carousel Slider Block for Gutenberg” було перекладено на 9 локалізацій. Дякуємо перекладачам за їх роботу.

Перекладіть “Carousel Slider Block for Gutenberg” на вашу мову.

Цікавитесь розробкою?

Перегляньте код, перегляньте сховище SVN або підпишіться на журнал розробки за допомогою RSS.

Журнал змін

1.0.0

First release of the plugin.

1.0.1

Fixed lodash issue.

1.0.2

Updates for latest WP Gutenberg version. Fixed editor CSS.

1.0.3

Added autoplay settings.

1.0.4

Improved UI experience by using inner blocks controls. Added RTL option. Removed padding option. Updated slide block icon.

1.0.5

Added block.json. Improved carousel block layout in the editor. Updated slide block icon. Tested for WordPress 5.9.

1.0.6

Eliminated block margin CSS issue in slides.
Changed the style of the “Add slide” button.

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