Mojarad Screenshot Mockup Carousel

Mojarad Screenshot Mockup Carousel helps you turn static website screenshots into polished, animated portfolio presentations.

It is designed for designers, developers, agencies, freelancers, and product teams who want to present websites, landing pages, web apps, case studies, and digital projects in a more premium and visual way.

Instead of placing a simple image on the page, this plugin displays your screenshots inside responsive desktop and mobile mockups. Long screenshots automatically scroll inside the device screens, while desktop and mobile slides stay synchronized in one clean carousel.

The result is a smooth, modern, portfolio-ready showcase that makes your work feel more alive.

What can you showcase?

You can use Mojarad Screenshot Mockup Carousel to present:

• Website portfolio items
• Case study pages
• Landing page designs
• WordPress projects
• SaaS and web app screens
• Client project previews
• UI and UX design work
• Before and after website presentations

Key Features

• Custom post type for showcases
• Simple shortcode output
• Unlimited slides per showcase
• Desktop screenshot support
• Mobile screenshot support
• Built-in fallback images
• Responsive 4:3 mockup stage
• Synchronized desktop and mobile carousel
• Smooth automatic screenshot scrolling
• JavaScript-powered animation restart on every slide
• Global settings page
• Custom arrow color
• Custom arrow background color
• Custom dot color
• Custom active dot color
• Adjustable scroll duration
• Adjustable start hold and end hold
• Autoplay toggle
• Pause on hover toggle
• Device shadow toggle
• Lightweight frontend
• No external frontend dependencies

Recommended Screenshot Workflow

For the best result, use high-quality long screenshots.

Recommended workflow:

1. Capture desktop screenshots with the GoFullPage Chrome extension.
2. Capture full-page mobile screenshots as one continuous vertical image.
3. Upload matching desktop and mobile screenshots into each slide.
4. Keep each slide pair related to the same page or section.

Recommended desktop fallback or screenshot size:

• 1440 x 2600 px
• PNG format

Recommended mobile fallback or screenshot size:

• 430 x 2200 px
• PNG format

Mobile screenshots should be one continuous vertical screenshot whenever possible. This gives the smoothest scrolling effect inside the mobile mockup.

Shortcode

After creating a showcase, copy its shortcode from the Showcase admin screen.

Example:

[mojasmc_showcase id=”1″]

Built-in Fallback Images

If a slide is missing a desktop or mobile image, the plugin uses built-in fallback images.

Fallback files are located in:

assets/images/default-desktop.png
assets/images/default-mobile.png

This keeps the mockup layout stable even when one image is not provided.

Global Settings

Go to:

Showcase > Settings

From there you can control:

• Arrow color
• Arrow background
• Arrow hover background
• Dot color
• Active dot color
• Scroll duration
• Start hold
• End hold
• Autoplay
• Pause on hover
• Device shadow
• Maximum showcase width
• Control position

Lightweight by Design

Mojarad Screenshot Mockup Carousel does not depend on heavy sliders or animation libraries.

The frontend carousel and scrolling animation are handled with lightweight JavaScript and modern browser animation APIs.