Carousel Slider Block for Gutenberg vs Logo Slider , Logo Carousel , Logo showcase , Client Logo

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 Accessibility-ready with keyboard navigation and ARIA labels 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. Upgrading from Legacy Carousel See the support topic for upgrading legacy blocks to Carousel Slider Version 2. Carousel Slider settings are available from Settings > Carousel Slider in the WordPress admin. 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.

Logo Slider Carousel is an easy plugin to display logo carousel slider of clients, business partners or affiliates along with title, URL on your website. Responsive design and easy to embed in any post or page using shortcode [tc-logo-slider] . also can be add in themes PHP template using Upgrade to PRO » View live Demos » Documentations » Support » Send Message On Facebook » How To Create A Website » TC Logo Slider Carousel Plugin Features: Users can Easily installable TC Carousel Slider. Fully Responsive Carousel Slider. Supported all Modern browsers Powered By OWL carousel . Custom post type . Work with all WordPress theme. Developer friendly & easy to customize. Unlimited slider can be displayed from different logo categories. logos can be shown ASC or DESC order. Basic Setting panel to manage the carousel. Tc Logo Carousel key Features In Free Version you can manage Items number in Large Desktops- screen size larger than 1198px , Item in Desktops -screen size larger than 978px,Tablets Devices screen size 768px and Up and Mobile screen size 768px and less you can Show/hide Carousel Navigation and Dots manage Carousel Loop You can create unlimited Carousel using category Use following shortcode to display clients, partners or sponsors Logo. Basic Usages The Shortcode Below will show all Logos: [tc-logo-slider] The Shortcode Below will show a carousel slider from Logos of a category like donars: [tc-logo-slider logo_cat="donars"] The Shortcode Below will show Logos of a category like clients with ASC order [tc-logo-slider logo_cat="clients" order="ASC"] Pro Version Features: Logo images Auto resize and crop. Different Layout Styles. 5 Nice Logo Image Hover Effects. Shortcodes Generator – no need to copy /paste shortcode Attributes. Tooltip (Show logo title in a tooltip popup). Tooltip background, border and text color change option. Navigation, Pagination, Border, Logo Title and Logo Title Hover Color Changeable. Advanced settings panel with Basic , Advanced and Styling Settings Basic Settings control Auto Play , Stop On Hover , Logo Number on (Lg Screen , Desktop , small Desktop and Tablet ). Advanced Settings to enable/disable Show Tooltip ,Pagination ,Pagination Number , Navigation and Auto height. Styling Setting for changing Navigation Color , Border Color , Logo Height ,Logo Width. Unlimited logo slider can be displayed from different logo categories. Logo border show/hide option Stop On Hover option Fully Responsive – logo Items on Large Desktop, Small Desktop, Tablet, mobile can be changeable. Show Logo Title. Support within 6 hours. Price is very reasonable. All features of free version And many more…. Tc Logo Carousel key Features In Pro Version You can Use different Carousel , List , Grid and Filter Layout. Watch the video tutorial. Upgrade to PRO »