Dits.Agency

DITS Carousel Slider Block is a custom block that lets you create flexible and responsive sliders directly in the WordPress block editor.
Features:
<ul>
<li>Drag & drop slide reordering</li>
<li>Responsive slider powered by Swiper.js</li>
<li>Custom icons using Font Awesome</li>
<li>Easy slide management inside Gutenberg</li>
<li>Lightweight and developer-friendly</li>
</ul>
This plugin is translation-ready.
<h3>Third-party Resources</h3>
This plugin bundles the following third-party libraries:
<ul>
<li>
Swiper 
License: MIT 
License URI: https://github.com/nolimits4web/swiper/blob/master/LICENSE 
Source: https://swiperjs.com/
</li>
<li>
Font Awesome Free 
License: SIL OFL 1.1 (fonts), MIT (code) 
License URI: https://fontawesome.com/license/free 
Source: https://fontawesome.com/
</li>
<li>
react-beautiful-dnd 
License: MIT 
License URI: https://github.com/atlassian/react-beautiful-dnd/blob/master/LICENSE 
Source: https://github.com/atlassian/react-beautiful-dnd
</li>
<li>
array-move 
License: MIT 
License URI: https://github.com/sindresorhus/array-move/blob/main/license 
Source: https://github.com/sindresorhus/array-move
</li>
</ul>
All bundled libraries are compatible with GPL-2.0-or-later.
<h3>Development</h3>
This plugin uses @wordpress/scripts for building assets.
Source files are located in:
<ul>
<li>src/blocks/</li>
<li>src/components/</li>
<li>src/Data/</li>
</ul>
To build assets:
<ol>
<li>npm install</li>
<li>npm run build</li>
</ol>

DITS Carousel Slider Block

A Gutenberg block that allows you to easily create responsive sliders using Swiper.js.

Michael

Creates a simple Swiper slider out of container elements. Flexbox has to be active.
<h3>How to use it</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/s8oyX1u-T6E?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<ul>
<li>create a horizontal container and give it an ID (Advanced – CSS ID)</li>
<li>add multiple sub containers (those are the slides)</li>
<li>add the <code>Slide everything</code> widget somewhere in the page</li>
<li>set the ID of the container in “Slider ID”</li>
<li>change some settings</li>
<li>preview the page</li>
</ul>
Events:
You can listen to the <code>miga_slide_everything_init</code> event to get informed when the slider is ready to use: 
 <code>document.addEventListener("miga_slide_everything_init", function(e) { 
 alert("ready"); 
});</code>
Currently only working with one slider in your page!

Slide everything for Elementor

Creates a simple Swiper slider out of container elements. Flexbox has to be active.

DITS Carousel Slider Block vs Slide everything for Elementor