mark l chaves

<p>This plugin allows you to use of the popular <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper.js</a> library in WordPress.</p>
<p>This is a minimalist plugin that is for displaying responsive cards in a slide.</p>
<ul>
<li>On a large screen device, the slide will show a horizontal card (image on the left and text on the right). </li>
<li>On a small device, the slide becomes a stacked card with the image on the top and text on the bottom.</li>
</ul>
<p>See the screengrabs below to get a visual or visit the <a href="https://streetphotography.blog/ashtabula-swiper-slider/" rel="nofollow ugc">live demo</a>.</p>
<p><strong>Note</strong>: You should be comfortable with HTML and CSS to use this plugin.</p>
<h3>Usage</h3>
<ol>
<li>Use the <a href="https://github.com/marklchaves/ashtabula/blob/master/ashtabula-demo.html" rel="nofollow ugc">demo HTML file</a> as a starter template. Add this HTML to a HTML or code block/element to your page or post.</li>
<li>To add the images, use the example CSS below as a template. Add the CSS to your <strong>Appearance</strong> > <strong>Customize</strong> > <strong>Additional CSS</strong> or your child theme’s <code>style.css</code> file.</li>
</ol>
<p>CSS example to specify the background image for the responsive card in a slide.</p>
<pre><code>/**
 * Swiper Slider Plugin Custom Styles
 */

#my-swiper-slide-1 {
 background-image: url(mybgimg-1.png);
}
#my-swiper-slide-2 {
 background-image: url(mybgimg-2.png);
}
#my-swiper-slide-3 {
 background-image: url(mybgimg-3.png);
}
</code></pre>
<h3>Credits</h3>
<p>Powered by <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper.js</a>.</p>


Ashtabula

Ashtabula - A Swiper Slider Plugin for WordPress

Lovro Hrust

<p>Block based slider, leverages the speed and versatility of the <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper slider</a>.</p>
<h4>Key Features</h4>
<ul>
<li>🥇 <strong>Insert Any Block as a Slide</strong>: No restrictions! Use the full power of the WordPress block editor.</li>
<li>🥈 <strong>Flexible Configuration</strong>: Use Swiper’s full range of features by entering the JSON configuration.</li>
<li>🥉 <strong>Lightweight & Fast</strong>: Uses only <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper</a> library as dependency.</li>
<li>🌟 <strong>Developer-Friendly</strong>: The source code is fully available, making it easy to customize with hooks.</li>
</ul>
<h4>NEW!</h4>
<p>I am accepting suggestions for new features and improvements.<br />
If you have an idea, please <a href="https://github.com/Lovor01/makeiteasy-slider/issues" rel="nofollow ugc">open an issue on GitHub</a><br />
or write here in support section.</p>
<h4>JSON configuration how to</h4>
<p>Head to Swiper docs, to <a href="https://swiperjs.com/swiper-api#parameters" rel="nofollow ugc">Parameters section</a> to find parameter you need.<br />
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>.<br />
Once you found the parameters you need, write them as JSON instead as javascript object, i.e.:</p>
<pre><code>{
    autoplay: {
        delay: 6000,
        disableOnInteraction: true
    },
    pagination: {
        clickable: true
    }
}
</code></pre>
<p>would be written as</p>
<pre><code>{
    "autoplay": {
        "delay": 6000,
        "disableOnInteraction": true
    },
    "pagination": {
        "clickable": true
    }
}
</code></pre>
<p>And enter them on settings tab in block sidebar under Advanced slider configuration section.<br />
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>.</p>
<p>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.<br />
There is a built in syntax checker in Advanced slider settings box,</p>
<h3>Developers</h3>
<p>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, …</p>


Makeiteasy Slider

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

Ashtabula vs Makeiteasy Slider