=== Mojarad Screenshot Mockup Carousel ===
Contributors: drwilly
Tags: showcase, portfolio, carousel, mockup, screenshot, website showcase, case study, device mockup
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Display long website screenshots inside animated desktop and mobile mockups with smooth synchronized scrolling.

== Description ==

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.

== Installation ==

1. Upload the plugin folder to the /wp-content/plugins/ directory.
2. Activate the plugin through the Plugins screen in WordPress.
3. Go to Showcase > Add New.
4. Add your desktop and mobile screenshots.
5. Save the showcase.
6. Copy the generated shortcode.
7. Place the shortcode inside any page, post, or builder that supports shortcodes.

== Frequently Asked Questions ==

= Can I add more than one slide? =

Yes. Each showcase can contain unlimited slides.

= Do desktop and mobile screenshots need to be the same height? =

No. The plugin calculates the scrolling distance for each screenshot independently.

= What happens if I only upload a desktop image? =

The plugin will use the built-in mobile fallback image.

= What happens if I only upload a mobile image? =

The plugin will use the built-in desktop fallback image.

= Can I change the colors of arrows and dots? =

Yes. Go to Showcase > Settings and change the global control colors.

= Can I change the scroll speed? =

Yes. You can adjust the global scroll duration from the settings page.

= Does this plugin require Elementor, Gutenberg blocks, or a page builder? =

No. It works with a simple shortcode.

= Does this plugin use external frontend libraries? =

No. It uses lightweight JavaScript and CSS.

== Screenshots ==

1. Showcase output with desktop and mobile mockups.
2. Admin slide manager.
3. Global settings page.

== Changelog ==

= 1.0.0 =
* Initial release.