SlideFactory Pro Documentation

How SlideFactory Pro Works

SlideFactory Pro is a modern slideshow builder that allows users to create animated image sliders and testimonial carousels directly in the browser. The app includes live previewing, autoplay controls, navigation controls, export functionality, and responsive slideshow generation.

Start Reading ← Back to Help Index

Application Overview

SlideFactory Pro is a browser-based slideshow editor. The application allows users to create two slideshow types:

🖼 Image Slideshows

Upload multiple images and instantly create a smooth, animated image carousel.

💬 Testimonial Slideshows

Build customer review sliders with avatars, names, dates, colors, and styled cards.

Live Preview
Autoplay
Export HTML
Responsive UI
Glassmorphism

Application Layout

The application is split into two primary areas:

  • Sidebar Editor — controls slideshow settings, uploads, styling, and content creation.
  • Main Content Area — displays the live preview, slide management, and export code.
Important: The app uses a responsive CSS Grid layout. On desktop, the editor appears on the left. On mobile devices, the sidebar is hidden to maximize preview space.

Configuration Panel

The configuration section allows users to customize the slideshow behavior.

1

Select Slideshow Type

Users can switch between Image Slideshow mode and Testimonial Slideshow mode.

2

Adjust Dimensions

Width and height inputs dynamically resize the slideshow preview container.

3

Enable Autoplay

Users can activate automatic slide transitions and control timing intervals.

4

Show Navigation Controls

Enables next/previous buttons and slide indicator dots.

Content Management

The app dynamically changes the available editor fields depending on the selected slideshow type.

Image Upload System

Users can upload multiple images simultaneously. The JavaScript FileReader API converts images into Base64 data URLs for preview rendering.

Testimonial Builder

Users can add testimonial text, names, dates, avatar images, colors, and spacing settings. 

// Example Testimonial Object

{
  id: 1,
  type: 'testimonial',
  text: 'Amazing product!',
  name: 'Sarah Johnson',
  date: '2026-05-21',
  avatar: 'base64-image-data'
}

Live Preview System

Every time content or settings are changed, the render() function rebuilds the slideshow preview in real time.

  • Slides are dynamically generated using JavaScript.
  • Image slides use CSS background images.
  • Testimonial slides use HTML card templates.
  • The slider track animates using CSS transforms.
Animation Engine: The slideshow uses translateX animations with smooth cubic-bezier transitions for modern movement effects.

Export Code Generator

One of the most powerful features is the export system. Users can generate a standalone HTML slideshow file directly from the editor.

  • Creates complete HTML structure
  • Includes generated CSS styles
  • Includes JavaScript slider logic
  • Supports autoplay and controls
  • Provides copy and download actions
Important: Exported image placeholders must be replaced with real image URLs before deployment.

Responsive Design Features

The app was designed using modern responsive techniques.

CSS Grid Layout

Automatically reorganizes content depending on screen size.

Glassmorphism UI

Uses blurred panels, transparency, gradients, and layered shadows.

Mobile Optimization

Sidebar collapses on smaller screens for cleaner preview viewing.

Typical User Workflow

1

Choose Slideshow Type

Select either image mode or testimonial mode.

2

Add Content

Upload images or create testimonial entries.

3

Customize Appearance

Modify dimensions, autoplay timing, colors, and controls.

4

Preview Live

Instantly test the slideshow inside the preview area.

5

Export Final HTML

Generate standalone slideshow code and download it as an HTML file.