Carousel Slider Block for Gutenberg vs Slider Ultimate

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.

Slider Demo Website Ultimate Slider is an easy-to-use responsive slider plugin that lets you add a clean, modern, image slider to any page on your WordPress site using a simple Gutenberg block or slider shortcode. Create a high-resolution full-width slider that looks great and that transitions well into a beautiful mobile slider. Key Slider Features Responsive full-width slider layout that adapts to any page setup and size Includes a Gutenberg block, so you can add the slider to any page, post, sidebar or widget area on your site Simple slider shortcode for adding the slider to any page Create an unlimited number of slides for display in your slider Create different slideshows using the built-in slider categories Ultimate Product Catalog slider integration Drag and drop slides to re-arrange slider order There are various slider customization options, including slider autoplay and the ability to set the slider delay and slide interval times. There is also a custom CSS input that lets you further modify the slider styling, so you can get it looking and working exactly as you need. [ultimate-slider] Simply insert the shortcode above into any page to display your slider. Alternatively you can use the Display Slider block, which you can find by searching for it or directly in the Ultimate Slider block section. The Ultimate Slider plugin also fully integrates with the Ultimate Product Catalog plugin. This means that you can choose to have a slide’s content and image pulled directly from a specific product from the Ultimate Product Catalog. Alternatively, you can choose to just type in the slide content and set either the featured image or the first image in your post as the slide image. Each slide has a customizable title and text area. You can also add custom links to each slide in the form of buttons, offering your visitors an easy and upfront way of accessing the most important pages on your site. Additional Features Custom post type for easy integration with other WordPress functionality Customizable slider options, including autoplay, and slide interval and slide delay time Custom CSS input to modify slider styling Add YouTube videos to your slider Carousel mode Choose the aspect ratio for your slider Timer bar so visitors know when the slide will change Choice of dots or thumbnails for slide navigation Bulk edit slides (e.g. to assign categories, etc.) This jQuery slider is your best option for adding a responsive slideshow to your WordPress site. Whether you just need a simple responsive banner at the top of your homepage or a custom slider with mutliple images and content, our wide array of options will allow to set this up in no time. With options for a carousel slider, slider effects and more, you can customize it to your needs and create the perfect responsive mobile slider. WooCommerce Slider (Requires Premium) Liven up your WooCommerce product pages by replacing the default image area with a responsive slideshow. Our custom slider option lets you showcase your different product images in an effective, attractive manner. The WooCommerce slider integration also gives you an option to add a new banner or responsive slideshow to any page that is automatically populated with the images and content from your WooCommerce products. Responsive WooCommerce slider on your product pages, taking your WooCommerce images to the next level Automatically populated with your product images, no extra work All animated slider effects apply to the WooCommerce slider as well Add a new banner or responsive slideshow that showcases your products anywhere on your site Create a carousel slider that lets you show multiple images at once The responsive WooCommerce slider looks great on all screens and is a great option as a mobile WooCommerce slider Premium Features Choose from ~20 arrows and set any color, size or background you’d like without any coding Option to replace the main image on the WooCommerce Product Page with an image slider of all of a product’s images Lightbox option to create scrolling galleries with the carousel feature Multiple slide transition effects Title animations for your slides Options to hide certain slide elements in mobile view Set a separate aspect ratio for the slider for mobile view Option to force the slider to take the full width of the window, regardless of theme containers Option to add watermarks to your slides to protect your images Styling options, including the font family, size and color of your slide’s title, text and buttons Shortcode [ultimate-slider]: displays all slides that you’ve created, can accept the attributes ‘category’ (set to a category’s slug), to display only slides from a certain category, and ‘slider_type’ to display WooCommerce products without having to create new individual slides for them For more information, please visit our WordPress slider plugin page. For help and support, please see: Our FAQ page, here: https://wordpress.org/plugins/ultimate-slider/faq/ Our documentation, here: https://www.etoilewebdesign.com/support-center/?Plugin=US&Type=FAQs The Ultimate Slider support forum, here: https://wordpress.org/support/plugin/ultimate-slider