attosoft

<p>Auto AnimateImage is WordPress plugin that applies <a href="http://attosoft.info/en/blog/animate-image/" rel="nofollow ugc">AnimateImage script</a> to your site automatically. AnimateImage displays multiple images continuously like animated GIF. All you have to do is write <code>img</code> element like below, and the image will be animated automatically.</p>
<pre><code><img src="images/0.png" data-files="[0-9].png" />
</code></pre>
<p>As you know, <a href="http://en.wikipedia.org/wiki/Animated_GIF" rel="nofollow ugc">animated GIF</a> is the most common animation format, but it supports up to only 256 colors. There are some alternative animation formats such as <a href="http://en.wikipedia.org/wiki/APNG" rel="nofollow ugc">APNG</a>, <a href="http://en.wikipedia.org/wiki/MNG" rel="nofollow ugc">MNG</a>, <a href="http://en.wikipedia.org/wiki/JNG" rel="nofollow ugc">JNG</a>, <a href="http://en.wikipedia.org/wiki/Motion_JPEG" rel="nofollow ugc">Motion JPEG</a> and <a href="http://en.wikipedia.org/wiki/SVG_animation" rel="nofollow ugc">SVG Animation</a>. However they are currently not widely supported by Web browsers. That is why AnimateImage is the most appropriate method for animated images.</p>
<h4>Auto AnimateImage Features</h4>
<ul>
<li>Automatically applies <a href="http://attosoft.info/en/blog/animate-image/" rel="nofollow ugc">AnimateImage script</a> to your site</li>
<li>All you have to do is write <code>img</code> elements. No JavaScript, No Shortcode, No Gallery.</li>
<li>Common options and animation styles can be customized via <a href="screenshots/" rel="nofollow ugc">Settings screen</a></li>
<li>Compatible widely down to even obsolete WordPress 2.7</li>
</ul>
<h4>AnimateImage Features</h4>
<ul>
<li>Displays multiple images continuously like animated GIF. It supports sequential/arbitrary filenames.</li>
<li>Supports any image formats supported by Web browsers, such as <a href="http://en.wikipedia.org/wiki/GIF" rel="nofollow ugc">GIF</a>, <a href="http://en.wikipedia.org/wiki/Portable_Network_Graphics" rel="nofollow ugc">PNG</a>, <a href="http://en.wikipedia.org/wiki/JPEG" rel="nofollow ugc">JPEG</a>, <a href="http://en.wikipedia.org/wiki/JPEG_XR" rel="nofollow ugc">JPEG XR (HD Photo)</a>, <a href="http://en.wikipedia.org/wiki/BMP_file_format" rel="nofollow ugc">BMP</a>, <a href="http://en.wikipedia.org/wiki/TIFF" rel="nofollow ugc">TIFF</a>, <a href="http://en.wikipedia.org/wiki/WebP" rel="nofollow ugc">WebP</a> and <a href="http://en.wikipedia.org/wiki/SVG" rel="nofollow ugc">SVG</a>. Thereby transparent animation with more than 256 colors is available.</li>
<li>Many animation options are available, such as animation delay, repeat count, rewind, pause and blank image</li>
<li><code>img</code> elements  with <code>data-files</code> attribute are animated automatically. No need for writing JavaScript.</li>
<li>Animations are controllable by writing JavaScript. You can start/stop/replay them at any time.</li>
<li>Standalone script with 5.6 KB file size, without using JavaScript libraries such as jQuery</li>
<li>Supports Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera and their older versions</li>
</ul>
<h4>How to Install</h4>
<p>See <a href="installation/" rel="nofollow ugc">Installation</a>.</p>
<h4>How to Use</h4>
<p>All you have to do is write <code>img</code> elements with <code>data-files</code> attribute, and the images will be animated automatically. You can animate multiple images with sequential number, zero-padded sequential number, sequential alphabet and arbitrary filenames.</p>
<pre><code><img src="sequential/0.png" data-files="[0-99].png" />
<img src="zero-padded/00.png" data-files="[00-99].png" />
<img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" />
<img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" />
<img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" />
<img src="parent/child0/image.png" data-files="child[0-9]/file.png" />
</code></pre>
<p>AnimateImage supports many animation options such as animation delay, repeat count, rewind, pause and blank image. You can specify them with <code>data-*</code> attributes like below.</p>
<pre><code><img src="" data-files=""
    title="" alt="" id="" class="" style=""
    data-delay="" data-cycleDelay=""
    data-repeat="" data-rewind=""
    data-pauseAtFirst="" data-pauseAtLast=""
    data-showBlank="" data-blankClassName=""
    data-blankPath="" data-stretchBlank="" />
</code></pre>
<p>See <a href="other_notes/#Code-Examples" rel="nofollow ugc">Code Examples</a> for more information.</p>
<h4>Support Me</h4>
<ul>
<li>To keep my motivation, put rating stars and vote compatibility (works/broken) via the right sidebar</li>
<li>If you have any questions, view <a href="https://wordpress.org/support/plugin/auto-animateimage" rel="ugc">support forum</a> or post a new topic</li>
<li>See <a href="other_notes/#Localization" rel="nofollow ugc">Localization</a> if you can translate the plugin into your language</li>
<li>I would be grateful if you would <a href="http://attosoft.info/en/donate/" rel="nofollow ugc">donate to support plugin development</a></li>
<li><a href="http://attosoft.info/en/contact/" rel="nofollow ugc">Contact me</a> if you have any feedback</li>
</ul>
<p>Any comments will be very helpful and appreciated. Thank you for your support!</p>
<h4>Links</h4>
<ul>
<li><a href="http://attosoft.info/en/" rel="nofollow ugc">attosoft.info</a></li>
<li><a href="http://attosoft.info/en/blog/animate-image/" rel="nofollow ugc">AnimateImage script</a></li>
<li><a href="http://attosoft.info/en/blog/auto-animateimage/" rel="nofollow ugc">Auto AnimateImage plugin</a></li>
</ul>
<h3>Code Examples</h3>
<h4>Example 1: Sequential Filenames</h4>
<pre><code><img src="sequential/0.png" data-files="[0-99].png" />
<img src="zero-padded/00.png" data-files="[00-99].png" />
<img src="zero-padded/000.png" data-files="[000-999].png" />
<img src="lowercase/prefix-a.png" data-files="prefix-[a-z].png" />
<img src="uppercase/A_suffix.png" data-files="[A-Z]_suffix.png" />
</code></pre>
<h4>Example 2: Arbitrary Filenames</h4>
<pre><code><img src="arbitrary/foo.png" data-files="[foo, bar, baz].png" />
<img src="arbitrary/foo.png" data-files="[foo.png, bar.jpg, baz.gif]" />
<img src="prefix-foo_suffix.png" data-files="prefix-[foo, bar, baz]_suffix.png" />
</code></pre>
<h4>Example 3: Format String in Directory Name</h4>
<pre><code><img src="parent/child/file0.png" data-files="file[0-9].png" />
<img src="parent/child0/image.png" data-files="child[0-9]/file.png" />
<img src="parent0/child/image.png" data-files="parent[0-9]/child/file.png" />
</code></pre>
<p>* <code>data-files</code> attribute is specified with filename or relative path to directory, including format string.</p>
<h4>Example 4: title/alt Attributes</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" title="foo" />
<img src="images/0.png" data-files="[0-9].png" title="foo" alt="bar" />
<img src="images/0.png" data-files="[0-9].png" alt="bar" />
</code></pre>
<p>* <code>alt</code> attribute with the value of <code>title</code> attribute will be added if not specified.</p>
<h4>Example 5: id/class Attributes</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" id="foo" />
<img src="images/0.png" data-files="[0-9].png" class="bar" />
<img src="images/0.png" data-files="[0-9].png" class="" />
</code></pre>
<p>* <code>class</code> attribute will be added if not specified. default <code>class</code> attribute value is <code>"animation"</code>.</p>
<h4>Example 6: delay/cycleDelay Options</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-delay="1000" />
<img src="images/0.png" data-files="[0-9].png" data-cycleDelay="2000" />
</code></pre>
<p>* In default, <code>delay</code> option is <code>500</code> ms and <code>cycleDelay</code> option is <code>0</code> ms.</p>
<h4>Example 7: repeat/rewind Options</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-repeat="1" />
<img src="images/0.png" data-files="[0-9].png" data-repeat="1" data-rewind="true" />
</code></pre>
<p>* In default, <code>repeat</code> option is <code>-1</code> (infinite iteration) and <code>rewind</code> option is <code>false</code>.</p>
<h4>Example 8: pauseAtFirst/Last Options</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-pauseAtFirst="true" />
<img src="images/0.png" data-files="[0-9].png" data-pauseAtLast="true" />
</code></pre>
<p>* In default, <code>pauseAtFirst</code> option is <code>false</code> and <code>pauseAtLast</code> option is <code>false</code>.</p>
<h4>Example 9: showBlank/blankClassName/blankPath/stretchBlank Options (Blank Image)</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png" data-showBlank="true" />
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankClassName="foo" />
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="blank.png" />
<img src="images/0.png" data-files="[0-9].png" data-showBlank="true" data-blankPath="logo.png" data-stretchBlank="false" />
</code></pre>
<p>* In default, <code>showBlank</code> option is <code>false</code> and <code>blankClassName</code> option is <code>"blank"</code>.</p>
<h4>Example 10: Arbitrary Attributes</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png"
    width="100" height="100" longdesc="long description" />
</code></pre>
<h4>Example 11: Arbitrary CSS Properties</h4>
<pre><code><img src="images/0.png" data-files="[0-9].png"
    style="border: solid; border-top: dotted; border-bottom: dashed" /><h3>Localization</h3>
</code></pre>
<p>You can localize the plugin with <a href="http://www.poedit.net/" rel="nofollow ugc">Poedit</a>. Here is how to translate the plugin into your language.</p>
<ol>
<li><a href="http://www.poedit.net/download.php" rel="nofollow ugc">Download Poedit</a> and install it</li>
<li>Run Poedit and select your language</li>
<li>Input your name and mail address (optional)</li>
<li>Open “auto-animateimage/languages/animateimage.pot” file</li>
<li>Select original string and input its translation</li>
<li>Save the file as “animateimage-[LANG].po”</li>
</ol>
<p>“[LANG]” is a language code. For instance, “de_DE” is for German, “sv_SE” is for Swedish, “pt_BR” is for Portuguese spoken in Brazil. If you want to know your language code, see <a href="https://codex.wordpress.org/WordPress_in_Your_Language" rel="nofollow ugc">WordPress in Your Language</a>. If you need more information, see <a href="https://codex.wordpress.org/Translating_WordPress" rel="nofollow ugc">Translating WordPress</a>.</p>
<p>I would be grateful if you would <a href="http://attosoft.info/en/contact/" rel="nofollow ugc">send me</a> any translation files. Here are the available translations included in the latest plugin.</p>
<ul>
<li>Japanese (ja) translation by <a href="http://attosoft.info/" rel="nofollow ugc">attosoft</a></li>
</ul>
<p>If you have any questions, feel free to <a href="http://attosoft.info/en/contact/" rel="nofollow ugc">contact me</a>.</p>


Auto AnimateImage

Automatically applies AnimateImage script that displays multiple images like animated GIF. All you have to do is write img elements.

mohammadhanif

Sharik Khan

Pathhan

fkfaisalkhan007

zish

Alexander

FARAZFRANK

A WP Life

<p>Slider Factory helps you create attractive slideshows for your WordPress website. Whether you need an image slider for your homepage, a photo carousel for your portfolio, or a video slideshow for product demos, this plugin offers 12 ready-to-use layouts to get you started quickly.</p>
<p>The plugin works with a simple drag-and-drop interface. Upload your images, arrange them in your preferred order, adjust the settings, and place the shortcode on any page or post. Your slider will automatically adapt to different screen sizes, looking sharp on desktops, tablets, and mobile phones.</p>
<p>Each slider supports titles, descriptions, and alt text for images, which helps with accessibility and search engine optimization. You can upload multiple images at once and rearrange them easily. The admin dashboard is built with Bootstrap 5, making it intuitive to navigate and configure your sliders.</p>
<p>Slider Factory integrates smoothly with popular page builders including Elementor, Visual Composer, WPBakery Page Builder, and the Gutenberg block editor. It also works with WPML for multilingual websites.</p>
<h3>Watch Video Tutorial</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/UC0Ru2L4mFk?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent&listType=playlist&list=PLOeoids2h7nJrQEY8ro6-zp4i9wbUB6BY" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>How It Works</h3>
<ol>
<li>Navigate to Slider Factory in your WordPress admin</li>
<li>Click “Add New Slider” and choose a layout</li>
<li>Upload your images using the bulk uploader</li>
<li>Drag and drop to arrange the slide order</li>
<li>Configure settings like autoplay, width, and height</li>
<li>Copy the generated shortcode</li>
<li>Paste the shortcode into any page, post, or widget</li>
</ol>
<p>To embed a slider directly in a theme template, use:</p>
<pre><code><?php do_shortcode('[sf id=1 layout=1]') ?>
</code></pre>
<p>The shortcode <code>[sf id=1 layout=1]</code> contains the slider ID and layout number.</p>
<h3>Free Version Features</h3>
<ul>
<li><strong>12 Slider Layouts</strong> – Choose from image sliders, carousels, photo galleries, team sliders, testimonial sliders, and more</li>
<li><strong>Responsive Design</strong> – Sliders adapt to all screen sizes automatically</li>
<li><strong>Bulk Image Upload</strong> – Add multiple images at once with the built-in uploader</li>
<li><strong>Drag and Drop Sorting</strong> – Arrange slides in your preferred sequence</li>
<li><strong>Customizable Dimensions</strong> – Set custom width and height for each slider</li>
<li><strong>Autoplay Control</strong> – Enable or disable automatic slide transitions</li>
<li><strong>Title and Description</strong> – Add text overlays to each slide</li>
<li><strong>SEO Friendly</strong> – Alt text support for all slider images</li>
<li><strong>Widget Ready</strong> – Use sliders in sidebar widgets</li>
<li><strong>Bootstrap 5 Dashboard</strong> – Clean, modern admin interface</li>
</ul>
<p><strong>Free Plugin Demo:</strong> <a href="https://wpfrank.com/demo/slider-factory-free-wordpress-plugin/" rel="nofollow ugc">View Demo</a></p>
<h3>Pro Version Features</h3>
<p>Upgrade to Slider Factory Pro for additional layouts and advanced features:</p>
<ul>
<li><strong>21 Slider Layouts</strong> – Nine additional layout designs for more variety</li>
<li><strong>Video Slides</strong> – Add YouTube and Vimeo videos to your slideshows</li>
<li><strong>Transition Effects</strong> – Fade, slide, and CSS3 animation effects</li>
<li><strong>jQuery Easing</strong> – Smooth easing effects for slide transitions</li>
<li><strong>Speed Control</strong> – Adjust transition speed and autoplay intervals</li>
<li><strong>Pause on Hover</strong> – Pause slideshow when visitors hover over it</li>
<li><strong>Fullscreen Mode</strong> – Display sliders in fullscreen view</li>
<li><strong>Mouse Wheel Control</strong> – Navigate slides with mouse scroll</li>
<li><strong>Touch Swipe</strong> – Swipe gestures for mobile devices</li>
<li><strong>Thumbnail Navigation</strong> – Show clickable thumbnails below the slider</li>
<li><strong>Dots Pagination</strong> – Add navigation dots for slide control</li>
<li><strong>Arrow Navigation</strong> – Previous/next arrows for manual navigation</li>
<li><strong>Loading Bar</strong> – Visual progress indicator during slide transitions</li>
<li><strong>Image Links</strong> – Add clickable links to each slide image</li>
<li><strong>Two Link Buttons</strong> – Add multiple call-to-action buttons per slide</li>
<li><strong>Slide Sorting</strong> – Sort by title, ascending, descending, or random</li>
<li><strong>Adaptive Height</strong> – Slider height adjusts to image dimensions</li>
<li><strong>Gap Between Slides</strong> – Control spacing in carousel layouts</li>
<li><strong>Slider Cloning</strong> – Duplicate existing sliders with one click</li>
<li><strong>Custom CSS</strong> – Add your own styling for complete customization</li>
<li><strong>RTL Support</strong> – Right-to-left language support</li>
<li><strong>Translation Ready</strong> – Compatible with WPML and multilingual plugins</li>
</ul>
<p><strong>Pro Version Details:</strong> <a href="https://wpfrank.com/wordpress-plugins/slider-factory-pro/" rel="nofollow ugc">Learn More</a><br />
<strong>Pro Version Demo:</strong> <a href="https://wpfrank.com/demo/slider-factory-pro/" rel="nofollow ugc">View Demo</a><br />
<strong>Purchase Pro:</strong> <a href="https://wpfrank.com/account/signup/slider-factory-pro/" rel="nofollow ugc">Buy Now</a></p>
<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/H0_FnzsrEGc?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>


Slider Factory

The slider factory plugin is the ultimate factory to produce a multi-design slide show. I implemented multiple slider layouts in a single plugin dashboard. The plugin has 6 different layout designs to make an image slide show. I will add a new slider layout every month or a week. So, you don't need to install multiple slider plugins now.

The plugin main features of the slider are:
- Responsive Bootstrap 5 slider management dashboard
- Multiple image slide uploader
- Supports unlimited image slides in a single slider (depends on server configuration)
- Multiple slider design layouts (new design every month or week)
- Custom slider width and height
- Image slide content like title, description
- Image slide sorting
- Slider cloning
- Add a slider into the sidebar and footer widget
- Add slide on a page template

Hope you like this slider plugin and will use it on your website.

Thanks
Faraz

Best WordPress Slider Plugin

Fulfill all your different layouts needs within a single plugin.
Very Easy to use. Just uploaded same size images chose settings and done.
Now changing different sliders on my website weekly.

Best slider plugin ever made.

Easy To Use

Build image sliders, photo carousels, and video slideshows with 12 layouts. Drag-and-drop interface with responsive design.

Auto AnimateImage vs Slider Factory