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.

Lovro Hrust

Block based slider, leverages the speed and versatility of the <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper slider</a>.
<h4>Key Features</h4>
<ul>
<li>🥇 Insert Any Block as a Slide: No restrictions! Use the full power of the WordPress block editor.</li>
<li>🥈 Flexible Configuration: Use Swiper’s full range of features by entering the JSON configuration.</li>
<li>🥉 Lightweight & Fast: Uses only <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper</a> library as dependency.</li>
<li>🌟 Developer-Friendly: The source code is fully available, making it easy to customize with hooks.</li>
</ul>
<h4>NEW!</h4>
I am accepting suggestions for new features and improvements. 
If you have an idea, please <a href="https://github.com/Lovor01/makeiteasy-slider/issues" rel="nofollow ugc">open an issue on GitHub</a> 
or write here in support section.
<h4>JSON configuration how to</h4>
Head to Swiper docs, to <a href="https://swiperjs.com/swiper-api#parameters" rel="nofollow ugc">Parameters section</a> to find parameter you need. 
More elaborate configuration for some features is available further below on page, in <a href="https://swiperjs.com/swiper-api#modules" rel="nofollow ugc">Modules section</a>. 
Once you found the parameters you need, write them as JSON instead as javascript object, i.e.:
<pre><code>{
 autoplay: {
 delay: 6000,
 disableOnInteraction: true
 },
 pagination: {
 clickable: true
 }
}
</code></pre>
would be written as
<pre><code>{
 "autoplay": {
 "delay": 6000,
 "disableOnInteraction": true
 },
 "pagination": {
 "clickable": true
 }
}
</code></pre>
And enter them on settings tab in block sidebar under Advanced slider configuration section. 
You can learn more about JSON in <a href="https://stackoverflow.blog/2022/06/02/a-beginners-guide-to-json-the-data-format-for-the-internet/" rel="nofollow ugc">Stackoverflow blog</a> or on <a href="https://www.w3schools.com/js/js_json_intro.asp" rel="nofollow ugc">W3schools page</a>.
Your JSON configuration merges with default configuration needed for swiper to run. You can break slider functioning through misconfiguration, so this is the first place to look if something does not work. 
There is a built in syntax checker in Advanced slider settings box,
<h3>Developers</h3>
There is a full source code on <a href="https://github.com/Lovor01/makeiteasy-slider" rel="nofollow ugc">github</a>. You can investigate code, adjust it to your needs, collaborate, …

Makeiteasy Slider

Slider based on very popular library Swiper! Insert blocks as slides. Truly open source.

DITS Carousel Slider Block vs Makeiteasy Slider