sulaimandauda

Extrnd Block Slider adds a slider block for the WordPress editor with responsive layout controls, navigation options, and accessible frontend output. It uses the Embla Carousel library for touch-friendly scrolling and does not require jQuery.
Key Features:
<ul>
<li>Small frontend assets — streamlined JavaScript and CSS for frontend rendering</li>
<li>Zero jQuery — no jQuery dependency, not even transitively</li>
<li>Gutenberg native — configure everything inside the block editor, no admin pages</li>
<li>9 presets — Default, Hero, Gallery, Cards, Testimonials, Fullscreen, Logo Carousel, Coverflow, Fade</li>
<li>6 transition effects — Slide, Fade, Scale, Parallax, Coverflow, Flip with smooth scroll-based animations</li>
<li>5 arrow styles — Default, Rounded, Minimal, Outline, Circle</li>
<li>5 arrow positions — Sides, Bottom Right, Bottom Left, Bottom Center, Outside</li>
<li>5 pagination styles — Dots, Lines, Dashes, Numbers, Outline</li>
<li>3 pagination positions — Bottom, Right, Left</li>
<li>Progress bar — thin scroll-based progress indicator</li>
<li>Slide counter — shows current/total slide count (e.g. 1 / 5)</li>
<li>Navigation colours — customise arrow background, arrow icon, dot, and active dot colours</li>
<li>Responsive breakpoints — desktop, tablet (≤ 1024 px), and mobile (≤ 768 px) slides per view</li>
<li>Settings & Styles tabs — organised into Settings (Preset, Layout, Playback) and Styles (Effects, Navigation, Colors) tabs</li>
<li>Accessible — full keyboard navigation, screen reader announcements, reduced motion support</li>
<li>Developer friendly — PHP filter (<code>extrnd_block_slider_options</code>) and JS hooks (<code>extrndSlider.options</code>, <code>extrndSlider.init</code>, <code>extrndSlider.slideChange</code>)</li>
<li>Block transforms — convert Gallery, Group, or multi-selected blocks to/from Slider</li>
<li>Lazy initialisation — sliders below the fold only initialise when scrolled into view</li>
<li>Dynamic rendering — PHP render callback ensures future-proof output with zero block validation errors</li>
</ul>
Presets:
<ul>
<li>Default — standard full-width slider</li>
<li>Hero — 80 vh feature banner with fade transition</li>
<li>Gallery — multi-slide with 16 px gap</li>
<li>Cards — 3 visible slides with 24 px gap</li>
<li>Testimonials — centred single testimonial</li>
<li>Fullscreen — edge-to-edge 100 dvh</li>
<li>Logo Carousel — continuous-scroll brand logos</li>
<li>Coverflow — 3D coverflow effect</li>
<li>Fade — crossfade transitions</li>
</ul>
<h3>Development</h3>
The full uncompiled source code is included in the <code>src/</code> directory. The <code>build/</code> directory contains the compiled assets generated by esbuild. To regenerate the build files from source, run <code>npm install</code> followed by <code>npm run build</code>.
<h3>Third-Party Libraries</h3>
This plugin includes the Embla Carousel library for slider behaviour.
<ul>
<li>Project: Embla Carousel</li>
<li>Repository: https://github.com/davidjerleke/embla-carousel</li>
</ul>

Extrnd Block Slider

Responsive slider blocks for the WordPress editor with navigation controls, layout presets, and accessible frontend output.

YITHEMES

<h4>Enhance your product images, the key features of your product page</h4>
When we buy on an online shop, our contact with the product is limited: we cannot touch, smell or try it. We exclude some of our senses from the product experience so it’s really important to reproduce the appearance of the product as faithfully as possible using high quality and eye-catching photos of it. Usability research has shown that customers who buy online first check the photos, and only after read the product description. For this reason the product images are considered as the key element of the shopping experience.
The new version of YITH WooCommerce Product Gallery & Image Zoom allows enabling the zoom and a lightbox on your product images to let customers see any detail and, at the same time, manage thumbnails in a handy slider for a clean and modern result in your product pages.
<h4>Main features</h4>
<ul>
<li>Enable the zoom on your product images</li>
<li>Choose the zoom position (inside the main image or external, in the right side)</li>
<li>Deactivate the zoom on mobile devices</li>
<li>Set the size of the zoom window</li>
<li>Choose whether to blur the image while zooming or not</li>
<li>Show the lightbox on your product images</li>
<li>Customize colors, size and position of lightbox icon</li>
<li>Enable the product gallery slider</li>
<li>Set the number of thumbnails to show in the slider</li>
<li>Show the slider arrows on hover</li>
<li>Customize size, colors and shape of the arrows</li>
<li>Enable the slider autoplay</li>
<li>Enable the slider as infinite (and choose the style between “Circular” and “Back to 1st”)</li>
</ul>
NEED MORE? CHECK THE FEATURES OF THE PREMIUM VERSION:
<ul>
<li>Show or not a zoom icon with custom shape and colors</li>
<li>Disable the zoom option from specific products or categories</li>
<li>Disable the lightbox feature</li>
<li>Customize the lightbox overlay color</li>
<li>Option to replace the main image on hover on the gallery thumbnail</li>
<li>Show fixed arrows in the slider</li>
<li>Emphasize the active thumbnail with a different border color</li>
<li>Add opacity or set a grey scale for the inactive thumbnails</li>
</ul>
See it in action here:
<a href="https://plugins.yithemes.com/yith-woocommerce-zoom-magnifier/" rel="nofollow ugc">Check the Live Demo of the Premium Version ></a>
<h3>Suggestions</h3>
If you have suggestions about how to improve YITH WooCommerce Product Gallery & Image Zoom, you can <a href="mailto:plugins@yithemes.com" title="Your Inspiration Themes" rel="nofollow ugc">write us</a> so we can bundle them into YITH Zoom WooCommerce Magnifier.
<h3>Translators</h3>
<h4>Available Languages</h4>
<ul>
<li>English (Default)</li>
<li>Italian</li>
<li>Spanish</li>
</ul>
If you have created your own language pack, or have an update for an existing one, you can send <a href="https://codex.wordpress.org/Translating_WordPress" title="Translating WordPress" rel="nofollow ugc">gettext PO and MO file</a> 
<a href="https://yithemes.com/contact/" title="Your Inspiration Themes" rel="nofollow ugc">use</a> so we can bundle it into YITH WooCommerce Zoom Magnfier Languages.
<h3>Documentation</h3>
Full documentation is available <a href="https://docs.yithemes.com/yith-woocommerce-zoom-magnifier/" rel="nofollow ugc">here</a>.

YITH WooCommerce Product Gallery & Image Zoom

YITH WooCommerce Product Gallery & Image Zoom add zoom effect to product images and a customizable image slider.

Extrnd Block Slider vs YITH WooCommerce Product Gallery & Image Zoom