Carousel Slider Block for Gutenberg vs Slidr

A responsive modern carousel slider for the Gutenberg block editor that lets you add any blocks to your slides. Easily create sliders for hero sections, testimonials, products, and anything else using Gutenberg blocks. 🚀 Carousel Slider Version 2 is built on the modern Swiper.js library for improved performance and better mobile compatibility. Plugin site: carouselblock.com Features Add unlimited slides Add any blocks to the slides Preview the carousel in the editor Responsive and touch enabled Developer friendly: supports CSS variables & theme.json Settings Slides per view Slides to scroll at a time Slide speed Slide padding Prev/next arrows Dots navigation Infinite loop sliding Autoplay Pause on hover Disable on interaction Responsive settings: slides to show and scroll at given screen size RTL Advanced Settings For dynamic layouts where the slider or its surrounding layout changes after load, such as tabs, accordions, or lazy-loaded content. ResizeObserver Observer Observe parent elements Observe slide children Plugin Settings Plugin settings are available from Settings > Carousel Slider in the WordPress admin. Available options include showing legacy carousel blocks, hiding the legacy warning notice, and loading the full Swiper bundle instead of the default custom Swiper build. Included Patterns Full Width Hero Slider Testimonials Slider Logos Carousel The final look of these sliders depends on your theme styles. You can also fine-tune the design using custom CSS variables (see below). Requirements PHP 5.6+ is recommended, WordPress 5.8+, with Gutenberg active. Documentation Full documentation: carouselblock.com/docs 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. Customizing Styles Carousel Slider v2 supports custom styling via CSS variables: Styling documentation: carouselblock.com/docs?doc=styling Navigation --wp--custom--carousel-block--navigation-size: Arrow icon size --wp--custom--carousel-block--navigation-sides-offset: Distance from edge --wp--custom--carousel-block--navigation-color: Arrow color --wp--custom--carousel-block--navigation-hover-color: Arrow hover color (falls back to navigation-color) --wp--custom--carousel-block--navigation-alignfull-color: Arrow color when carousel is full width Pagination (dots) --wp--custom--carousel-block--pagination-top: Top offset --wp--custom--carousel-block--pagination-bottom: Bottom offset --wp--custom--carousel-block--pagination-bullet-size: Bullet size --wp--custom--carousel-block--pagination-bullet-active-color: Active bullet color --wp--custom--carousel-block--pagination-bullet-inactive-color: Inactive bullet color --wp--custom--carousel-block--pagination-bullet-inactive-hover-color: Inactive bullet hover color (falls back to active-color if set) --wp--custom--carousel-block--pagination-bullet-active-opacity: Active bullet opacity --wp--custom--carousel-block--pagination-bullet-inactive-opacity: Inactive bullet opacity --wp--custom--carousel-block--pagination-bullet-inactive-hover-opacity: Inactive bullet opacity on hover (falls back to inactive-opacity if not set) --wp--custom--carousel-block--pagination-bullet-horizontal-gap: Space between bullets (horizontal) --wp--custom--carousel-block--pagination-bullet-vertical-gap: Space between bullets (vertical) Block Spacing --wp--custom--carousel-block--image-margin-top: Top margin for image blocks --wp--custom--carousel-block--image-margin-bottom: Bottom margin for image blocks --wp--custom--carousel-block--cover-margin-top: Top margin for cover blocks --wp--custom--carousel-block--cover-margin-bottom: Bottom margin for cover blocks Theme JSON Support All the CSS variables can also be defined directly inside your theme’s theme.json under the settings.custom key. For example: { "settings": { "custom": { "carousel-block": { "navigation-size": "22px", "navigation-color": "#000", "pagination-bullet-active-color": "#000" } } } } Frontend API Carousel Slider exposes a small frontend API for integrations with tabs, accordions, modals, or other hidden UI. For some of these dynamic layout cases, the Advanced Settings observer options can also handle updates automatically. window.CarouselSliderBlock.init( container ): Initializes carousel instances inside the given container. window.CarouselSliderBlock.update( container ): Updates existing carousel instances inside the given container and initializes any that are not yet initialized.

Slidr is a clean, simple, responsive and touch-friendly multi-purpose Carousel. It takes a different approach than most other carousel plugins on that it displays posts or custom posts instead of just gallery photos (but it can show gallery photos as well if you like). Its goal is to be as flexible as possible, allowing you to fully customize its appearance via CSS and override the default HTML output. You can even use it as a “vessel” to display your custom loops which could, practically, contain any content you like, from YouTube videos and Google Maps to Instagram feeds and Tweets! View the demo | Custom loop demos Features Responsive. Touch friendly. Can accept variable width – fixed height images. You can call it via a shortcode on posts, pages and widgets. You can use it instead of the default WordPress gallery. No need to mess with shortcodes – just enable “Slidr for Gallery” and start creating galleries as usual, the WordPress way! Supports cycling items (when at the end, clicking “next” loads the first item and so on, simulating a circular move). Autoscroll support. Customizable queries with more than a dozen of parameters. You can adjust the post type, number of entries, thumbnail size, order and many more. You can have different carousels with different queries and different parameters on a single page. You can call it conditionally, to load scripts and styles only when needed. It can display entries without photos. For example, you can show the titles and excerpts of your recent posts (or custom posts) and style them however you like. Using a special function you can override the text output for each item. For example, instead of the item’s title and excerpt you can show an icon, some static text or something else. You can add your custom class on each shortcode, to style each carousel differently. If you are a theme developer, you can pass your own default values through your theme’s functions.php for “Slidr for Gallery” option. Works on every recent version of all popular browsers (Firefox, Chrome, Internet Explorer, Opera, Safari) and it even supports Internet Explorer 8. A custom loop function allows you to use the carousel with your custom loops. That way you can practically use it to display any content you like (videos, content from feeds etc). View demos