| @@ -2,9 +2,9 @@ | ||
| 2 | 2 | Contributors: binsaifullah |
| 3 | 3 | Tags: slider, carousel, slider block, gutenberg slider, image slider |
| 4 | 4 | Requires at least: 6.5 |
| 5 | 5 | Tested up to: 7.1 |
| 6 | -Stable tag: 3.1.0 | |
| 6 | +Stable tag: 3.2.0 | |
| 7 | 7 | Requires PHP: 7.4 |
| 8 | 8 | License: GPLv2 or later |
| 9 | 9 | License URI: https://www.gnu.org/licenses/gpl-2.0.html |
| 10 | 10 | |
| @@ -11,67 +11,99 @@ | ||
| 11 | 11 | Build responsive sliders and carousels in the block editor - image, video, post, testimonial, logo and before-after slider blocks. |
| 12 | 12 | |
| 13 | 13 | == Description == |
| 14 | 14 | |
| 15 | -**GutSlider is an all-in-one slider and carousel plugin for the WordPress block editor (Gutenberg).** It adds a set of native slider blocks so you can build an image slider, content slider, post carousel, video carousel, testimonial slider, logo carousel or a before-after comparison slider directly on the page - no shortcodes, no page builder, no code. | |
| 15 | +**GutSlider is an all-in-one slider and carousel plugin for the WordPress block editor.** Build hero sliders, post carousels, video galleries, testimonial sliders, logo strips, before-after comparisons and scrolling marquees right on the page. No shortcodes, no page builder, no code. | |
| 16 | 16 | |
| 17 | -Every block is built with native Gutenberg components, so the editing experience feels like WordPress itself. Drag and drop your content, adjust the settings in the sidebar, and see the result live in the editor. | |
| 17 | +Pick a ready-made design, drop in your content, and see the result live in the editor. Every block is built with native Gutenberg components, so it feels like part of WordPress. | |
| 18 | 18 | |
| 19 | -**Fast by design.** GutSlider only loads its scripts and styles on pages where a slider block is actually used, generates a single minified CSS file per page instead of inline `<style>` tags, and ships without jQuery. Sliding is powered by Swiper JS for smooth, hardware-accelerated transitions. | |
| 19 | +**Fast by design.** Scripts and styles load only on pages that use a slider. Each page gets one minified CSS file instead of inline styles, and there is no jQuery. Swiper JS handles smooth, hardware-accelerated sliding. | |
| 20 | 20 | |
| 21 | -[youtube http://www.youtube.com/watch?v=P9Zj4bSVq4I] | |
| 21 | +[youtube https://www.youtube.com/watch?v=Hob3WgBTVZI] | |
| 22 | 22 | |
| 23 | -### Why Choose GutSlider | |
| 23 | +👉 **[See every block live in the demos](https://demos.gutslider.com/)** · **[Compare Free and Pro](https://gutslider.com/pricing/)** | |
| 24 | 24 | |
| 25 | -* **Slide any content** - images, video, text, buttons, headings, or any other block. | |
| 26 | -* **Conditional asset loading** - scripts and styles load only on pages that use a slider block. | |
| 27 | -* **No jQuery** - modern, dependency-free JavaScript built on Swiper JS. | |
| 28 | -* **Native block editor UI** - built with Gutenberg components, not a bolted-on iframe or modal. | |
| 29 | -* **Fully responsive** - separate Desktop, Tablet and Mobile values for spacing, columns, typography and more. | |
| 30 | -* **Complete slider controls** - autoplay, loop, speed, effects, centered mode, free mode and column counts. | |
| 31 | -* **Custom navigation and pagination** - styles, positions, sizes, colours, gaps and remote navigation. | |
| 32 | -* **CSS entrance animations** - per-element animations with adjustable delay. | |
| 33 | -* **Lightbox support** - open carousel photos in a full-screen lightbox. | |
| 34 | -* **Google Fonts and typography controls** - full typography panel on every text element. | |
| 35 | -* **Block patterns library** - ready-made slider layouts you can insert and edit. | |
| 36 | -* **Enable or disable blocks** - turn off the blocks you do not use from the GutSlider dashboard. | |
| 37 | -* **Translation ready** - fully internationalised and RTL friendly. | |
| 25 | +### ✨ Why Choose GutSlider | |
| 38 | 26 | |
| 39 | -### Free Slider and Carousel Blocks | |
| 27 | +* 🎨 **Design picker in every block** - start from a polished, ready-made design and adjust it in the sidebar. | |
| 28 | +* 🧩 **Slide any content** - images, video, headings, buttons or any other block. | |
| 29 | +* 🖱️ **Interactive motion** - slides that react to the mouse with depth, 3D tilt and spotlight effects, plus magnetic buttons. | |
| 30 | +* ⚡ **Lightweight** - conditional asset loading, one CSS file per page, no jQuery. | |
| 31 | +* 📱 **Fully responsive** - separate Desktop, Tablet and Mobile values for spacing, columns, typography and more. | |
| 32 | +* 🎛️ **Complete slider controls** - autoplay, loop, speed, effects, centered mode, free mode and columns. | |
| 33 | +* 🧭 **Custom navigation and pagination** - styles, positions, sizes, colours and gaps. | |
| 34 | +* ♿ **Accessible** - keyboard support, pause buttons and respect for the reduced-motion setting. | |
| 35 | +* 🔤 **Google Fonts and typography** - a full typography panel on every text element. | |
| 36 | +* 📚 **Block patterns library** - ready-made slider layouts you can insert and edit. | |
| 37 | +* 🔌 **Enable or disable blocks** - switch off the blocks you don't use from the GutSlider dashboard. | |
| 38 | +* 🌍 **Translation ready** - fully internationalised and RTL friendly. | |
| 40 | 39 | |
| 41 | -* **[Static Slider](https://gutslider.com/static)** - a classic hero slider with image, heading, text and buttons. | |
| 42 | -* **[Flexible Slider](https://gutslider.com/flexible)** - slide any block content you like. | |
| 40 | +### 🆓 Free Slider and Carousel Blocks | |
| 41 | + | |
| 42 | +* **[Static Slider](https://gutslider.com/static)** - a hero slider with image, heading, text and buttons, entrance animations for each element, pointer effects (depth, 3D tilt, spotlight) and magnetic buttons. | |
| 43 | +* **[Flexible Slider](https://gutslider.com/flexible)** - slide any block content, with Hero and Cards designs and full background controls. | |
| 43 | 44 | * **[Testimonial Slider](https://gutslider.com/testimonial)** - reviews with photo, rating, name and designation. |
| 44 | -* **[Photo Carousel](https://gutslider.com/photo)** - image carousel with lightbox support. | |
| 45 | +* **[Photo Carousel](https://gutslider.com/photo)** - image carousel with lightbox and a 3D Coverflow design. | |
| 45 | 46 | * **[Logo Carousel](https://gutslider.com/brand-logos)** - client and brand logo carousel. |
| 46 | -* **[Before After Slider](https://gutslider.com/before-after)** - drag-to-compare image comparison slider. | |
| 47 | -* **[Video Carousel](https://gutslider.com/videos)** - YouTube and Vimeo video carousel with custom thumbnails. | |
| 48 | -* **[Blog Post Slider](https://gutslider.com/post-slider)** - dynamic post slider and carousel with query controls. | |
| 49 | -* **[Marquee](https://gutslider.com/marquee)** - continuous scrolling marquee for any content. | |
| 47 | +* **[Before After Slider](https://gutslider.com/before-after)** - drag, fade or toggle between two images, with labels and several designs. | |
| 48 | +* **[Video Carousel](https://gutslider.com/videos)** - YouTube and Vimeo videos. Add many links at once, and titles and thumbnails fill in by themselves. | |
| 49 | +* **[Blog Post Slider](https://gutslider.com/post-slider)** - dynamic post slider with query controls, related posts and Magazine Hero and Card Carousel designs. | |
| 50 | +* **[Marquee](https://gutslider.com/marquee)** - an endlessly scrolling strip for logos, text or images, with Logo Strip, Text Ticker and Announcement Bar designs, a steady pixel speed, separators, fade edges, slow down or stop on hover, and a live motion preview in the editor. | |
| 50 | 51 | |
| 51 | -### Pro Slider and Carousel Blocks | |
| 52 | +### 🚀 GutSlider Pro: Make Every Slider Stand Out | |
| 52 | 53 | |
| 53 | -Need more? [GutSlider Pro](https://gutslider.com/pricing/) adds premium blocks and features: | |
| 54 | +The free blocks cover the essentials. **[GutSlider Pro](https://gutslider.com/pricing/)** adds premium blocks, premium designs and features for sliders that get noticed, rank better and convert. | |
| 54 | 55 | |
| 55 | -* **[Shader Slider](https://demos.gutslider.com/fashion-slider/)** | |
| 56 | -* **[Shutters Slider](https://demos.gutslider.com/shutters-slider/)** | |
| 57 | -* **[Slicer Slider](https://demos.gutslider.com/slicer-slider/)** | |
| 58 | -* **[Fashion Slider](https://demos.gutslider.com/fashion-slider/)** | |
| 59 | -* **[Triple Slider](https://demos.gutslider.com/triple-slider/)** | |
| 60 | -* **[Card Slider](https://demos.gutslider.com/card-slider/)** | |
| 61 | -* **[Hover Slider](https://demos.gutslider.com/hover-slider/)** | |
| 62 | -* **[Tinder Slider](https://gutslider.com/pricing/)** | |
| 63 | -* **[Spring Carousel](https://demos.gutslider.com/spring-carousel/)** | |
| 64 | -* **[Panorama Carousel](https://demos.gutslider.com/panorama-carousel/)** | |
| 65 | -* **[3D Carousel](https://demos.gutslider.com/3d-carousel/)** | |
| 66 | -* **[Material Carousel](https://demos.gutslider.com/material-slider/)** | |
| 67 | -* **[Marquee Carousel](https://demos.gutslider.com/marquee-carousel/)** | |
| 68 | -* **[WooCommerce Product Carousel](https://demos.gutslider.com/product-carousel/)** | |
| 69 | -* **[WooCommerce Product Categories Carousel](https://demos.gutslider.com/product-categories-carousel/)** | |
| 70 | -* **Thumbnail Gallery Navigation** - thumbnail-based navigation for the Static and Blog Post sliders. | |
| 56 | +**15 extra premium blocks** | |
| 71 | 57 | |
| 72 | -### Links | |
| 58 | +* **[Shader Slider](https://demos.gutslider.com/fashion-slider/)** - WebGL shader transitions between slides. | |
| 59 | +* **[Shutters Slider](https://demos.gutslider.com/shutters-slider/)** - slides open and close like window shutters. | |
| 60 | +* **[Slicer Slider](https://demos.gutslider.com/slicer-slider/)** - images slice apart as they change. | |
| 61 | +* **[Fashion Slider](https://demos.gutslider.com/fashion-slider/)** - bold, editorial slider for fashion and lifestyle brands. | |
| 62 | +* **[Triple Slider](https://demos.gutslider.com/triple-slider/)** - three images moving together. | |
| 63 | +* **[Card Slider](https://demos.gutslider.com/card-slider/)** - stacked, swipeable cards. | |
| 64 | +* **[Hover Slider](https://demos.gutslider.com/hover-slider/)** - hover a title to reveal its image. | |
| 65 | +* **[Tinder Slider](https://gutslider.com/pricing/)** - swipe cards left and right. | |
| 66 | +* **[Spring Carousel](https://demos.gutslider.com/spring-carousel/)** - springy, physics-style motion. | |
| 67 | +* **[Panorama Carousel](https://demos.gutslider.com/panorama-carousel/)** - a curved, panoramic view. | |
| 68 | +* **[3D Carousel](https://demos.gutslider.com/3d-carousel/)** - a rotating 3D ring of slides. | |
| 69 | +* **[Material Carousel](https://demos.gutslider.com/material-slider/)** - Material-style expanding slides. | |
| 70 | +* **[Marquee Carousel](https://demos.gutslider.com/marquee-carousel/)** - a continuous image marquee. | |
| 71 | +* **[WooCommerce Product Carousel](https://demos.gutslider.com/product-carousel/)** - sell more with product sliders. | |
| 72 | +* **[WooCommerce Product Categories Carousel](https://demos.gutslider.com/product-categories-carousel/)** - guide shoppers to your categories. | |
| 73 | 73 | |
| 74 | +**Premium designs for the free blocks** | |
| 75 | + | |
| 76 | +* **Static Slider** - Split Hero, Glass Card and Card Carousel. | |
| 77 | +* **Flexible Slider** - Split, Fullscreen, Stacked Cards and Ticker. | |
| 78 | +* **Testimonial Slider** - Center Cards, Avatar Switcher, Marquee Wall, Swipe Deck, 3D Coverflow and Glow Cards. | |
| 79 | +* **Photo Carousel** - Showcase, Polaroid Stack, Film Ticker and Expanding Panels. | |
| 80 | +* **Before After** - Glass Handle, Rounded Card, Split Labels and Dark Studio. | |
| 81 | +* **Video Carousel** - Cinema, Playlist and Video Cards. | |
| 82 | +* **Blog Post Slider** - Overlay Grid, Featured + List and Minimal Timeline. | |
| 83 | +* **Marquee** - Testimonials, Image Strip and Tag Cloud. | |
| 84 | + | |
| 85 | +**Premium features** | |
| 86 | + | |
| 87 | +* 🔍 **SEO schema markup** - video rich results (VideoObject) for the Video Carousel and ItemList markup for the Blog Post Slider. | |
| 88 | +* 🎬 **Before-after video comparisons** - compare two videos playing in sync, not just images. | |
| 89 | +* 🖼️ **Multiple comparisons in one block** - switch between before-after pairs with thumbnails. | |
| 90 | +* ▶️ **Auto-play and fullscreen** for before-after comparisons. | |
| 91 | +* 🎥 **Video extras** - play in a lightbox, preview on hover, silent looping backgrounds, custom thumbnails and custom end times. | |
| 92 | +* 🎬 **Content reveal** for the Static Slider - subtitle, title, description and buttons play in one cinematic sequence. Choose words rise, letters flip, blur in or mask reveal, and a slow, normal or fast pace. It replays on every slide and waits until the slider is on screen. | |
| 93 | +* ✨ **Content animations and background effects** for the Flexible Slider. | |
| 94 | +* 🌊 **Marquee motion** - up to three rows moving in opposite directions, marquees that move with page scroll, drag or swipe to move, and reverse or speed up on scroll. | |
| 95 | +* 🗂️ **Slide names as tabs** - turn any Flexible Slider into a tabbed showcase. | |
| 96 | +* 📱 **Per-device slide visibility and responsive background images.** | |
| 97 | +* 🔗 **Wrapper links** - make a whole slide clickable. | |
| 98 | +* 🧭 **Remote navigation** - control a slider from buttons anywhere on the page. | |
| 99 | +* 🧷 **Detached content and thumbnail gallery navigation** for the Static and Blog Post sliders. | |
| 100 | +* 💬 **Priority support** from the team that builds GutSlider. | |
| 101 | + | |
| 102 | +👉 **[Upgrade to GutSlider Pro](https://gutslider.com/pricing/)**. Your existing free sliders keep working as they are, and the Pro options unlock in the same sidebar. | |
| 103 | + | |
| 104 | +### 🔗 Useful Links | |
| 105 | + | |
| 74 | 106 | * [All Demos](https://demos.gutslider.com/) |
| 75 | 107 | * [Documentation](https://gutslider.com/) |
| 76 | 108 | * [Get GutSlider Pro](https://gutslider.com/pricing/) |
| 77 | 109 | |
| @@ -97,8 +129,14 @@ | ||
| 97 | 129 | |
| 98 | 130 | = Is GutSlider free? = |
| 99 | 131 | Yes. All the blocks listed under "Free Slider and Carousel Blocks" are free forever. GutSlider Pro is an optional upgrade that adds extra blocks and features. |
| 100 | 132 | |
| 133 | += What do I get with GutSlider Pro? = | |
| 134 | +Pro adds 15 premium slider and carousel blocks (including WooCommerce product carousels), premium designs for every free block, SEO schema markup, before-after video comparisons, video lightbox and hover previews, content animations, remote navigation and priority support. See [the pricing page](https://gutslider.com/pricing/). | |
| 135 | + | |
| 136 | += Will my sliders break if I upgrade to Pro or stop using it? = | |
| 137 | +No. Pro builds on the free plugin, so your existing sliders stay the same. Pro options simply unlock in the same sidebar. | |
| 138 | + | |
| 101 | 139 | = Do I need to know how to code? = |
| 102 | 140 | No. Every slider is built visually in the block editor with drag-and-drop content and sidebar settings. |
| 103 | 141 | |
| 104 | 142 | = Are the sliders responsive? = |
| @@ -126,21 +164,16 @@ | ||
| 126 | 164 | Use the plugin's [support forum](https://wordpress.org/support/plugin/slider-blocks/) on WordPress.org. |
| 127 | 165 | |
| 128 | 166 | == Screenshots == |
| 129 | 167 | |
| 130 | -1. All GutSlider blocks available in the block inserter. | |
| 131 | -2. Testimonial slider with photo, rating, name and designation. | |
| 132 | -3. Photo carousel being edited, with the settings sidebar open. | |
| 133 | -4. Photo carousel on the frontend with navigation and pagination. | |
| 134 | -5. Before After slider for drag-to-compare image comparisons. | |
| 135 | -6. Video carousel with YouTube and Vimeo videos. | |
| 136 | -7. Static slider used as a full-width hero section. | |
| 137 | - | |
| 138 | 168 | == External Services == |
| 139 | 169 | |
| 140 | 170 | **Google Fonts** - When you select a Google Font in a block's typography settings, the font stylesheet is requested from `https://fonts.googleapis.com` and the font files from `https://fonts.gstatic.com` on the pages where that block appears. Visitors' IP address and browser user agent are sent to Google as part of that request. No request is made if you only use system or theme fonts. |
| 141 | 171 | Google Terms of Service: https://policies.google.com/terms - Google Privacy Policy: https://policies.google.com/privacy |
| 142 | 172 | |
| 173 | +**YouTube and Vimeo** - The Video Carousel block embeds videos from YouTube (`https://www.youtube.com`, `https://www.youtube-nocookie.com`) and Vimeo (`https://player.vimeo.com`) on the pages where it is used, and loads their thumbnails from `https://i.ytimg.com` and `https://i.vimeocdn.com`. In the editor, the "Get title and thumbnail" option asks your own site's oEmbed proxy, which contacts YouTube or Vimeo. Visitors' IP address and browser user agent are sent to these services when a video or thumbnail loads. The GutSlider dashboard also shows a GutSlider video from `https://www.youtube-nocookie.com`; nothing is loaded from YouTube until you press play. | |
| 174 | +YouTube Terms of Service: https://www.youtube.com/t/terms - Google Privacy Policy: https://policies.google.com/privacy - Vimeo Terms: https://vimeo.com/terms - Vimeo Privacy Policy: https://vimeo.com/privacy | |
| 175 | + | |
| 143 | 176 | == Third Party Libraries == |
| 144 | 177 | |
| 145 | 178 | * [Swiper JS](https://swiperjs.com/) (MIT) - slider and carousel engine. |
| 146 | 179 | * [fslightbox](https://fslightbox.com/) - image lightbox for the Photo Carousel block. |
| @@ -145,8 +178,30 @@ | ||
| 145 | 178 | * [Swiper JS](https://swiperjs.com/) (MIT) - slider and carousel engine. |
| 146 | 179 | * [fslightbox](https://fslightbox.com/) - image lightbox for the Photo Carousel block. |
| 147 | 180 | |
| 148 | 181 | == Changelog == |
| 182 | += 3.2.0 = | |
| 183 | +* Added: Design picker with ready-made designs in the Static, Flexible, Testimonial, Photo, Before After, Video, Blog Post and Marquee blocks | |
| 184 | +* Added: Marquee - rewritten motion engine with a steady speed in pixels per second, new designs, separators, item width and alignment, fade edges, slow down on hover, and a "Preview motion" button in the editor | |
| 185 | +* Added: Marquee - add items from several images at once, plus ready-made text, logo, image, testimonial and tag items | |
| 186 | +* Added: Video Carousel - add many videos at once, fetch title and thumbnail automatically, and upload date for schema | |
| 187 | +* Added: Before After - fade and toggle modes, label options and new designs | |
| 188 | +* Added: Flexible Slider - Background panel for each slide, and Hero and Cards designs | |
| 189 | +* Added: Blog Post Slider - more designs, now working as sliders, with related posts and "highlight the current post" | |
| 190 | +* Added: Static Slider - Motion Effects panel with pointer effects (depth, 3D tilt, spotlight) and magnetic buttons | |
| 191 | +* Added: Free vs Pro comparison page in the GutSlider dashboard | |
| 192 | +* Added (Pro): Marquee Testimonials, Image Strip and Tag Cloud designs, multiple rows, and scroll and drag motion | |
| 193 | +* Added (Pro): Video search results markup, Blog Post schema markup, before-after video comparisons, multiple comparisons, auto-play and fullscreen, video lightbox and hover preview, content animation, background effects and tab pagination | |
| 194 | +* Added (Pro): Static Slider Content reveal - subtitle, title, description and buttons play in one sequence, with four reveal styles and three speeds | |
| 195 | +* Improved: Static Slider entrance animations now wait until the slider is on screen | |
| 196 | +* Improved: Compact Border control with only the solid, dashed and dotted styles | |
| 197 | +* Improved: Settings that don't apply to the chosen design or mode are now hidden | |
| 198 | +* Improved: Accessibility - pause button, keyboard support and reduced-motion support for moving content | |
| 199 | +* Fixed: Static Slider - "Fade" animation had no effect, animation delays slowed button hover colours, and the primary button's delay setting followed the secondary button | |
| 200 | +* Fixed: Static Slider showed unsaved changes each time it was opened | |
| 201 | +* Fixed: Nested links in linked slides, empty background images, and blocks showing unsaved changes when a post is reopened | |
| 202 | +* Fixed: Flexible Slider crash when "Fit Content" is turned on | |
| 203 | + | |
| 149 | 204 | = 3.1.0 = |
| 150 | 205 | * Added: Redesigned dashboard with live block, usage and front-end weight figures |
| 151 | 206 | * Added: New start screen when a slider block is first inserted, with a pattern shortcut |
| 152 | 207 | * Added: Blocks can be switched on and off straight from the dashboard |
| @@ -214,7 +269,10 @@ | ||
| 214 | 269 | |
| 215 | 270 | For the full release history, see [changelog.txt](https://plugins.svn.wordpress.org/slider-blocks/trunk/changelog.txt). |
| 216 | 271 | |
| 217 | 272 | == Upgrade Notice == |
| 273 | + | |
| 274 | += 3.2.0 = | |
| 275 | +Big design update: a design picker in every block, a rebuilt Marquee, interactive motion effects for the Static Slider, faster video setup and many fixes. Existing sliders keep working without block recovery. | |
| 218 | 276 | |
| 219 | 277 | = 2.13.2 = |
| 220 | 278 | Fixes the sorting setting issue. Compatible with WordPress 7.0. |
