{"id":51,"date":"2025-09-26T08:50:55","date_gmt":"2025-09-26T08:50:55","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/slider-block\/"},"modified":"2025-11-16T09:22:47","modified_gmt":"2025-11-16T09:22:47","slug":"slider-block","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/slider-block\/","title":{"rendered":"Slider block"},"content":{"rendered":"\n

The Slider block allows creating sliders using the popular Swiper slider<\/a>.<\/p>\n\n\n\n\"Slider<\/a>\n\n\n\n

Various UI controls for configuring Swiper options<\/a> are provided.<\/p>\n\n\n\n

Slides per view<\/strong> and Space between<\/strong> options can use Tailwind-like breakpoint syntax, e.g. 8 sm:16 lg:32<\/code>.<\/p>\n\n\n\n

\"Slider<\/div>\n\n\n\n

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

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<\/strong> can help:<\/p>\n\n\n\n

\"Slider<\/div>\n\n\n\n

When enabled, you’ll only see the first slide of the slider, unless you use the List View to activate another slide:<\/p>\n\n\n\n

\"Slider<\/div>\n\n\n\n
\n\n\n\n

Tailwind variants for Swiper slider<\/h2>\n\n\n\n

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

Custom variant<\/th>CSS selector<\/th><\/tr><\/thead>
swiper<\/code><\/td>:is(&.swiper, & .swiper)<\/code><\/td><\/tr>
swiper-wrapper<\/code><\/td>& .swiper-wrapper<\/code><\/td><\/tr>
swiper-slide<\/code><\/td>& .swiper-slide<\/code><\/td><\/tr>
swiper-nav<\/code><\/td>&:not(.use-default-nav, :has(.use-default-nav)) :where(.swiper-button-next, .swiper-button-prev)<\/code><\/td><\/tr>
swiper-nav-prev<\/code><\/td>&.swiper-button-prev<\/code><\/td><\/tr>
swiper-nav-next<\/code><\/td>&.swiper-button-next<\/code><\/td><\/tr>
swiper-nav-hover<\/code><\/td>&:not([aria-disabled=true]):hover<\/code><\/td><\/tr>
swiper-nav-focus<\/code><\/td>&:not([aria-disabled=true]):focus<\/code><\/td><\/tr>
swiper-nav-active<\/code><\/td>&:not([aria-disabled=true]):active<\/code><\/td><\/tr>
swiper-scrollbar<\/code><\/td>& .swiper-scrollbar<\/code><\/td><\/tr>
swiper-pagination<\/code><\/td>& .swiper-pagination<\/code><\/td><\/tr>
swiper-bullets<\/code><\/td>& .swiper-pagination-bullets<\/code><\/td><\/tr>
swiper-bullet<\/code><\/td>& .swiper-pagination-bullet<\/code><\/td><\/tr>
swiper-bullet-active<\/code><\/td>& .swiper-pagination-bullet-active<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

Swiper preset<\/h2>\n\n\n\n

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<\/code> class can be used to disable navigation controls appearance on a specific slider.<\/p>\n\n\n\n

Variables can also be set on the Slider block itself to configure Swiper CSS variables using Tailwind values:<\/p>\n\n\n\n

\"Swiper<\/div>\n\n\n\n

Simply enter --swiper-theme-color<\/code> to the Add classes or utility...<\/code> field to create a control for a Tailwind CSS variable.<\/p>\n\n\n\n

\n\n\n\n

Gallery<\/h2>\n\n\n\n

Images: https:\/\/picsum.photos<\/a><\/p>\n\n\n\n

When inserting a Gallery block<\/a> into a Slider block, disable the Wrap<\/strong> 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.<\/p>\n\n\n

\n
\n
\"\"<\/div>
\"\"<\/div>
\"\"<\/div>
\"\"<\/div>
\"\"<\/div>
\"\"<\/div>
\"\"<\/div>
\"\"<\/div>
\"\"<\/div><\/div>
<\/div>
<\/div>
<\/div><\/div>\n<\/div>\n
\n\t