Kevin Bazira

<p>Algori Video and Image Slider is a Gutenberg Block Plugin that enables you easily add video and image sliders to your website.</p>
<p>Capture your site visitors’ attention with compelling image slideshows, hero images/videos, header sliders and image carousels. <strong>This will boost user engagement and increase revenue for your site</strong>.</p>
<p>This free plugin has a lot to offer. Even more can be found in the Premium version of this Plugin, please see <a href="http://www.kevinbazira.com/blog/article/algori-image-and-video-slider-pro-for-wordpress-gutenberg#features" rel="nofollow ugc">all features of the Premium plugin here</a>.</p>
<h3>Features of the free image slider</h3>
<ol>
<li>Hide/Show Navigation Dots</li>
<li>Hide/Show Navigation Arrows</li>
<li>Enable/Disable Slideshow Autoplay</li>
<li>1 slider dot style</li>
<li>1 slider arrow style</li>
</ol>
<h3>Features of the premium version</h3>
<ol>
<li>14 different slider dot styles</li>
<li>14 different slider arrow styles</li>
<li>Add text with call to action button on top of slider</li>
<li>Hide/Show Navigation Dots</li>
<li>Hide/Show Navigation Arrows</li>
<li>Enable/Disable Slideshow Autoplay</li>
<li>Hide/Show Pause Autoplay on Click</li>
<li>Disable/Enable Right to Left Direction</li>
<li>Enable/Disable Vertical Direction</li>
<li>Enable/Disable Slide Fade</li>
<li>Enable/Disable Lazy Load</li>
<li>Enable/Disable Center Mode</li>
<li>Disable/Enable Infinite Slider Loop</li>
<li>Adjust Slider Animation Speed</li>
<li>Adjust Slider Autoplay Speed</li>
<li>Show multiple slides</li>
<li>Scroll multiple slides</li>
<li>Show slides in rows</li>
<li>Adjust slider video settings ( autoplay, muted, controls, loop, and much more … )</li>
<li>Set left, right, center, wide and full width alignments for image slider.</li>
</ol>
<p>Most of these features are enabled by default and can’t be disabled or adjusted in the free version. We released a Premium Plugin with many more exciting features that will enable you to adjust all the slider settings as you wish.</p>
<p>Have a look at the <a href="https://codecanyon.net/item/algori-image-and-video-slider-pro-for-wordpress-gutenberg/22818690" rel="nofollow ugc">Premium Plugin here</a>.</p>
<h3>How to use</h3>
<ol>
<li>After installing and activating the “Algori Image and Video Slider” plugin in your WordPress website.</li>
<li>Navigate to your blog post or page and use the Gutenberg editor to add an “Image & Video Slider” block.</li>
<li>Use the “Image & Video Slider” block to upload images/videos or choose images/videos from the media library to create your image slider or image carousel.<br />
PS: In order to choose multiple images in the media library press keyboard button “Ctrl” on Windows or “Command” on Mac, then click on your images to select them.</li>
<li>At this point, you can adjust your slider settings using the Gutenberg block inspector section.
<ul>
<li>Hide/Show Navigation Dots</li>
<li>Hide/Show Navigation Arrows</li>
<li>Enable/Disable Slideshow Autoplay</li>
</ul>
</li>
<li>Click “Publish” to view your new web page with an image slider.</li>
<li>Congratulations 😀</li>
</ol>


Algori Video and Image Slider

Algori Video and Image Slider is a Gutenberg Block Plugin that enables you easily add video and image sliders to your website.

Zayed Baloch

Hammal Albulushi

Naeem Noor

<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:</p>
<ul>
<li>Photography portfolios</li>
<li>Real estate before/after</li>
<li>Renovation projects</li>
<li>Design makeovers</li>
<li>Product comparisons</li>
<li>Restoration work</li>
<li>Medical procedures</li>
<li>And much more!</li>
</ul>
<h4>Video Tutorial</h4>
<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/1cQ9rhL-t70?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>
<h4>Live Demo</h4>
<p>Check the <a href="https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/" title="Twenty20 Live demo" rel="nofollow ugc">Live Demo</a>.</p>
<h4>Key Features</h4>
<ul>
<li>Responsive design – works perfectly on all devices</li>
<li>Horizontal and vertical sliding options</li>
<li>Customizable slider position and orientation</li>
<li>Custom “before” and “after” labels</li>
<li>Adjustable image widths and alignments</li>
<li>Mouse hover sliding effect</li>
<li>Touch-enabled for mobile devices</li>
<li>Multiple sliders per page</li>
<li>Widget support for sidebars</li>
<li>SEO-friendly with proper alt tag support</li>
<li>Accessibility compliant image comparisons</li>
</ul>
<h4>Page Builder Support</h4>
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder (Visual Composer)</li>
<li>Flatsome UX Builder</li>
<li>Classic Editor</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Photography before/after edits</li>
<li>Home renovation comparisons</li>
<li>Web design makeovers</li>
<li>Product transformations</li>
<li>Restoration projects</li>
<li>Beauty transformations</li>
<li>Real estate renovations</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode Example</h4>
<p><strong>Quick Example</strong></p>
<pre><code>[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
</code></pre>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><code>img1</code> – image ID.</li>
<li><code>img2</code> – image ID.</li>
<li><code>offset</code> – range from 0.1 to 1.0.</li>
<li><code>direction</code> – <code>horizontal|vertical</code>.</li>
<li><code>align</code> – <code>none|right|left</code>.</li>
<li><code>width</code> – supports both <code>px</code> and <code>%</code>.</li>
<li><code>before</code> – text for the “before” label.</li>
<li><code>after</code> – text for the “after” label.</li>
<li><code>hover</code> – <code>true</code> or <code>false</code>.</li>
</ul>


Twenty20 Image Before-After

Simple and clear implementation of the Twenty Twenty by Zurb script.  Thanks for saving me a few hours.

Works Well

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

Algori Video and Image Slider vs Twenty20 Image Before-After