Documentation
Docs

Slider block

The Slider block allows creating sliders using the popular Swiper slider.

Slider block controls for editing Swiper options

Various UI controls for configuring Swiper options are provided.

Slides per view and Space between options can use Tailwind-like breakpoint syntax, e.g. 8 sm:16 lg:32.

Slider block control for defining a custom configuration

When the controls are not enough, you can provide a custom JavaScript object with additional Swiper configuration (e.g. {parallax: true}):

The slider itself does not function in the block editor, instead all the slides are rendered at once, which can get quite cluttered. The option to Hide other slides can help:

Slider block editor options - Hide other slides - Display only the first or active slide in the editor.

When enabled, you’ll only see the first slide of the slider, unless you use the List View to activate another slide:

Slider block and child slides in WordPress Block Editor list view

Tailwind variants for Swiper slider

There are preconfigured custom Tailwind variants for targetting various Swiper slider UI parts. For example, instead of using an arbitrary variant [&_.swiper-wrapper]:border to add a border to the Swiper wrapper you can use swiper-wrapper:border.

Custom variantCSS selector
swiper:is(&.swiper, & .swiper)
swiper-wrapper& .swiper-wrapper
swiper-slide& .swiper-slide
swiper-nav&:not(.use-default-nav, :has(.use-default-nav)) :where(.swiper-button-next, .swiper-button-prev)
swiper-nav-prev&.swiper-button-prev
swiper-nav-next&.swiper-button-next
swiper-nav-hover&:not([aria-disabled=true]):hover
swiper-nav-focus&:not([aria-disabled=true]):focus
swiper-nav-active&:not([aria-disabled=true]):active
swiper-scrollbar& .swiper-scrollbar
swiper-pagination& .swiper-pagination
swiper-bullets& .swiper-pagination-bullets
swiper-bullet& .swiper-pagination-bullet
swiper-bullet-active& .swiper-pagination-bullet-active

Swiper preset

With ska-theme the block also has the Swiper preset applied by default to provide shared styles for theme color, navigation controls appearance and more. The .use-default-nav class can be used to disable navigation controls appearance on a specific slider.

Variables can also be set on the Slider block itself to configure Swiper CSS variables using Tailwind values:

Swiper slider CSS variables UI

Simply enter --swiper-theme-color to the Add classes or utility... field to create a control for a Tailwind CSS variable.

Gallery

Images: https://picsum.photos

When inserting a Gallery block into a Slider block, disable the Wrap option on the Gallery block so that it doesn’t wrap gallery images in an element and allows the individual images to become slides themselves.

Optionally, setting the gallery images to Link to -> Full size image and wrapping the slider with the Lightbox block allows the have a slider with a gallery that has a lightbox.

Query

The core WordPress Query block can be inserted into the Slider block to create slides from the results of the query.

Example slider rendering posts with “Blocks” tag using the WordPress “Query” block inside the “Slider” block

Text block

The Text block is a block that can contain Rich Text. By default the HTML tag name span is used, but it can be changed using the Element type block controls: The… Read more

Element block

The Element block is a block that can contain other blocks. By default the HTML tag name div is used, but it can be changed using the Element type block controls: The… Read more

Gallery block

The Gallery block is an alternative to the WordPress core Gallery block. The main advantage of the ska/gallery block is that it can render an image gallery with a simple and predictable… Read more

Image block

The Image block can be used to display different types of media. This documentation gives an overview of the modes that the Image block can operate in and provides copy-pastable examples of… Read more

Tailwind block

The Tailwind block in the ska-blocks plugin allows to enter HTML with Tailwind classes and compile it to include the Tailwind CSS on the front end as well. The block itself has… Read more

Slider block

The Slider block allows creating sliders using the popular Swiper slider. Various UI controls for configuring Swiper options are provided. Slides per view and Space between options can use Tailwind-like breakpoint syntax,… Read more

Lightbox block

The Lightbox block can be used to wrap images to give them lightbox capability. While the ska/image and ska/gallery blocks already have an option to enable lightbox, you can wrap multiple images… Read more

Conditions block

The Conditions and Condition blocks can be used to render content when a certain condition applies. Condition The ska/condition block allows to set any whitelisted PHP function name as as the condition… Read more

Post data block

The Post data block can render various data related to the current post. ska/post-data is an alternative to WordPress core blocks such as Title, Excerpt and Categories. The block aims to produce… Read more

Menu block

The Menu block renders a classic WordPress navigation menu. When using ska-theme, the legacy WordPress menus are re-enabled for a simpler alternative to the WordPress core Navigation block. The ska/menu block has… Read more

Code block

The code block is an alternative for the WordPress code block with the addition of syntax highlighting, indenting and copy function. The Code block uses the “Code block” preset for its’ appearance… Read more

Cart dialog block

The Cart dialog block can display a button that opens the WooCommerce mini cart widget in a Dialog, which is a light-weight alternative for the WC “Mini-cart” block. Example mini cart icon… Read more

Language switcher block

The Language switcher block can display a placeholder language switcher when a multilingual plugin isn’t installed yet, but will switch to using languages from WPML or Polylang once detected. Block options Mode… Read more

Logo slider

Images: https://logoipsum.com

Custom permanently scrolling logo slider with Gallery block and advanced slider configuration.

Advanced slider optionsJSON
{
	speed: 6000,
	allowTouchMove: false,
	autoplay: {
		delay: 1,
		disableOnInteraction: false,
	},
	a11y: {
		enabled: false,
	},
}

Lightbox slider cards gallery

Focus image slider gallery