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

Michael

<p>Creates a simple Swiper slider out of container elements. Flexbox has to be active.</p>
<h3>How to use it</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><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></span></p>
<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>
<p>Events:</p>
<p>You can listen to the <code>miga_slide_everything_init</code> event to get informed when the slider is ready to use:<br />
    <code>document.addEventListener("miga_slide_everything_init", function(e) {<br />
  alert("ready");<br />
});</code></p>
<p>Currently only working with one slider in your page!</p>


Slide everything for Elementor

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

Ashtabula vs Slide everything for Elementor