外掛標籤
開發者團隊
② 後台搜尋「Mojarad Screenshot Mockup Carousel」→ 直接安裝（推薦）
原文外掛簡介
Mojarad Screenshot Mockup Carousel is a lightweight WordPress plugin for presenting long website screenshots inside animated desktop and mobile device mockups.
It is designed for portfolio websites, agencies, freelancers, UI/UX designers, product teams, and WordPress developers who want to showcase websites and case studies in a more polished and visual way.
Instead of displaying static screenshots, the plugin places your desktop and mobile screenshots inside responsive device mockups. Long screenshots scroll smoothly inside the device screens, while desktop and mobile slides stay synchronized in one clean carousel.
This creates a modern showcase experience that is useful for:
Website portfolios
Client project presentations
UI/UX case studies
Landing page previews
Product showcases
Web app screenshots
WordPress project galleries
Version 1.1.0 adds performance improvements for pages that contain multiple showcase shortcodes. It introduces lazy image loading, viewport-based carousel activation, progressive slide loading, skeleton placeholders, and a shortcode slide limit attribute.
The plugin is built with a lightweight frontend architecture and does not depend on heavy slider libraries or external frontend frameworks.
Key Features
Animated desktop and mobile mockups
Smooth auto-scrolling screenshots
Synchronized desktop and mobile slide transitions
Responsive 4:3 showcase layout
Lightweight frontend rendering
Shortcode support
Shortcode slide limit attribute
Lazy image loading
Viewport-based carousel activation
Autoplay pause outside viewport
Progressive slide image preloading
Skeleton loading placeholders
Global animation settings
Hover pause support
Automatic image scaling
Drag and drop slide sorting
Theme-independent architecture
Built-in fallback screenshots
Persian language files
Performance Improvements
Mojarad Screenshot Mockup Carousel is designed to work better on pages that include multiple showcases.
The plugin does not immediately load all showcase images on page load. Instead, it waits until each showcase gets close to the viewport, then loads and activates that showcase.
This helps reduce the initial page load weight when using several showcase shortcodes on the same portfolio page.
Version 1.1.0 includes:
Lazy image loading
Carousel activation near viewport
Autoplay pause when outside viewport
Progressive slide image preloading
Skeleton placeholders before images load
Fixed image width and height attributes where possible
Shortcode Usage
Display all slides:
[mojasmc_showcase id=”1″]
Display only the first two slides:
[mojasmc_showcase id=”1″ limit=”2″]
The limit attribute is useful for portfolio overview pages, archive pages, landing pages, and pages that contain multiple showcases.
If the limit attribute is not provided, all slides will be displayed.
Recommended Screenshot Workflow
For the best visual result, use full-page screenshots.
For desktop screenshots, it is recommended to use the GoFullPage Chrome extension to capture full-length website screenshots.
Long screenshots create smoother scrolling animations inside the desktop mockup.
For mobile screenshots, full-page continuous screenshots are recommended as well. Many Samsung devices support long screenshot capture natively. Other devices may require browser tools or third-party applications depending on the operating system.
Recommended workflow:
Capture a full-page desktop screenshot.
Capture a full-page mobile screenshot.
Add both images to the same slide.
Keep each desktop and mobile image pair related to the same page or section.
Repeat for additional slides.
Built-in Fallback Images
If a slide is missing a desktop or mobile screenshot, the plugin automatically displays a built-in fallback image.
This keeps the showcase layout stable even if one image is not provided.
Global Settings
The plugin includes a global settings page where you can customize the showcase behavior and controls.
Available settings include:
Arrow color
Arrow background color
Arrow hover background color
Dot color
Active dot color
Scroll duration
Start hold
End hold
Autoplay
Pause on hover
Device shadow
Maximum showcase width
Controls position
Perfect For
Freelancers
Agencies
Portfolio websites
Product showcases
Case studies
UI/UX presentations
Creative studios
WordPress developers
