SlideFlow Logo

SlideFlow - Professional Slideshow Maker User Guide

Create Stunning Slideshows with Ease

Quick Start Guide

  1. Download and extract the SlideFlow ZIP file to a folder on your computer.
  2. Open `index.html` in a modern web browser (e.g., Chrome, Firefox, Edge, or Safari).
  3. Drag and drop your images or videos into the drop area, or use the "Upload Media" button ().
  4. Customize your slideshow with transitions, colors, and text positions via the Settings Panel (click ).
  5. Play your slideshow by clicking "Play Slideshow" (), and navigate manually with "Previous" () and "Next" ().

Key Features

Integration with Existing Websites

Adding SlideFlow to an Existing Website Page

You can integrate SlideFlow into an existing website page or use it as a standalone page. Here’s how:

1. Embedding SlideFlow in a Website Page
  1. Copy all files from the SlideFlow ZIP package (e.g., `index.html`, `script.js`, `style.css`, `images/`, `video/`) into your website’s project folder.
  2. Edit your existing HTML page to include SlideFlow’s files. Add the following code snippet where you want SlideFlow to appear:
    3. <!-- Include SlideFlow files -->
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- SlideFlow container -->
<div class="slideshow-container" id="slideshow-container">
    <div class="drop-area" id="drop-area">
        <p>Drag and drop images or videos here</p>
    </div>
</div>
<div class="controls"><!-- Add controls as in index.html --></div>
<div class="progress-bar" id="progress-bar"></div>
<div class="settings-sidebar" id="settings-panel"><!-- Add settings panel as in index.html --></div>
<div class="dots-container" id="dots-container"></div>
<audio id="background-audio" loop></audio>
  3. Ensure the paths to `style.css`, `script.js`, and supporting folders (`images/`, `video/`) are correct relative to your HTML file.
  4. Test the page in a browser to ensure SlideFlow loads and functions correctly within your website.
2. Adding SlideFlow as a Standalone Page
  1. Upload the entire SlideFlow folder (containing `index.html`, `script.js`, `style.css`, `images/`, `video/`, etc.) to your web server.
  2. Access SlideFlow via a URL like `https://yourwebsite.com/slideflow/`.
  3. Customize `index.html` or its supporting files as needed for your website’s design or domain.

Note: Ensure your web server supports HTML5, JavaScript, and media files (JPG, PNG, MP4, WEBM) for full functionality.

Frequently Asked Questions (FAQ)

Q: Can I customize colors and fonts?
A: Yes, you can customize colors via the Settings Panel. Font customization is planned for future updates.

Q: Can I export the slideshow as a video?
A: Currently, video export is not supported but is under development for a future release.

Q: How do I receive updates?
A: All future updates are included free with your purchase—check our support channels for announcements.

Q: What browsers are supported?
A: SlideFlow works on Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari (latest versions recommended).

Technical Support

Submit your questions or issues through our Google Form linked below. Responses will be sent to your provided email within 24-48 hours.

Support Form
شعار SlideFlow

SlideFlow - دليل المستخدم لصانع عرض الشرائح الاحترافي

أنشئ عروض شرائح مذهلة بسهولة

دليل البدء السريع

  1. قم بتنزيل ملف ZIP لـ SlideFlow واستخرجه إلى مجلد على جهازك.
  2. افتح `index.html` في متصفح ويب حديث (مثل Chrome، Firefox، Edge، أو Safari).
  3. اسحب وأفلت صورك أو فيديوهاتك في منطقة السحب، أو استخدم زر "رفع الوسائط" ().
  4. خصص عرضك الشرائحي باستخدام التأثيرات، الألوان، ومواقع النصوص عبر لوحة الإعدادات (اضغط ).
  5. تشغل العرض الشرائحي بالضغط على "تشغيل العرض" ()، واستخدم الأسهم "السابق" () و"التالي" () للتنقل يدويًا.

الميزات الرئيسية

التكامل مع المواقع الموجودة

إضافة SlideFlow إلى صفحة موقع موجود أو كصفحة مستقلة

يمكنك دمج SlideFlow داخل صفحة موقع موجود أو استخدامه كصفحة مستقلة. إليك كيفية ذلك:

1. دمج SlideFlow في صفحة موقع موجود
  1. انسخ جميع ملفات حزمة ZIP لـ SlideFlow (مثل `index.html`، `script.js`، `style.css`، `images/`، `video/`) إلى مجلد مشروع موقعك.
  2. عدل صفحتك HTML الموجودة لتضمين ملفات SlideFlow. أضف الكود التالي حيث تريد ظهور SlideFlow:
    3. <!-- تضمين ملفات SlideFlow -->
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- حاوية SlideFlow -->
<div class="slideshow-container" id="slideshow-container">
    <div class="drop-area" id="drop-area">
        <p>اسحب وأفلت الصور أو الفيديوهات هنا</p>
    </div>
</div>
<div class="controls"><!-- أضف الأزرار كما في index.html --></div>
<div class="progress-bar" id="progress-bar"></div>
<div class="settings-sidebar" id="settings-panel"><!-- أضف لوحة الإعدادات كما في index.html --></div>
<div class="dots-container" id="dots-container"></div>
<audio id="background-audio" loop></audio>
  3. تأكد من أن مسارات `style.css`، `script.js`، ومجلدات الدعم (`images/`، `video/`) صحيحة نسبيًا لملف HTML الخاص بك.
  4. جرّب الصفحة في المتصفح للتأكد من تحميل SlideFlow وعمله بشكل صحيح داخل موقعك.
2. إضافة SlideFlow كصفحة مستقلة
  1. ارفع مجلد SlideFlow بالكامل (يحتوي على `index.html`، `script.js`، `style.css`، `images/`، `video/`، إلخ) إلى خادم موقعك الويب.
  2. يمكن الوصول إلى SlideFlow عبر رابط مثل `https://yourwebsite.com/slideflow/`.
  3. خصص `index.html` أو ملفات الدعم حسب تصميم موقعك أو نطاقك.

ملاحظة: تأكد من أن خادم موقعك يدعم HTML5، JavaScript، وملفات الوسائط (JPG، PNG، MP4، WEBM) لضمان الوظائف الكاملة.

الأسئلة الشائعة

س: هل يمكنني تخصيص الألوان والخطوط؟
ج: نعم، يمكن تخصيص الألوان عبر لوحة الإعدادات. تخصيص الخطوط قيد التطوير.

س: هل يمكن تصدير العرض كفيديو؟
ج: لا يدعم التصدير إلى فيديو حاليًا، لكنه قيد التطوير لإصدار مستقبلي.

س: كيف أحصل على التحديثات؟
ج: جميع التحديثات المستقبلية مجانية مع الشراء—تابع قنوات الدعم للحصول على الإعلانات.

س: ما هي المتصفحات المدعومة؟
ج: SlideFlow يدعم Google Chrome، Mozilla Firefox، Microsoft Edge، وSafari (يُوصى بأحدث الإصدارات).

الدعم الفني

أرسل أسئلتك أو مشكلاتك عبر نموذج Google أدناه. ستُرسل الردود إلى بريدك الإلكتروني خلال 24-48 ساعة.

نموذج الدعم
Logo SlideFlow

SlideFlow - Guide de l'utilisateur

Créez des diaporamas époustouflants facilement

Guide de démarrage rapide

  1. Téléchargez et décompressez le fichier ZIP de SlideFlow dans un dossier sur votre ordinateur.
  2. Ouvrez `index.html` dans un navigateur web moderne (par ex., Chrome, Firefox, Edge ou Safari).
  3. Glissez-déposez vos images ou vidéos dans la zone de dépôt, ou utilisez le bouton "Upload Media" ().
  4. Personnalisez votre diaporama avec des transitions, des couleurs et des positions de texte via le Panneau des paramètres (cliquez sur ).
  5. Lancez votre diaporama en cliquant sur "Play Slideshow" (), et naviguez manuellement avec "Précédent" () et "Suivant" ().

Fonctions principales

Intégration avec des sites web existants

Ajouter SlideFlow à une page de site web existante ou comme page autonome

Vous pouvez intégrer SlideFlow dans une page de site web existante ou l’utiliser comme page autonome. Voici comment procéder :

1. Intégrer SlideFlow dans une page de site web existante
  1. Copiez tous les fichiers du package ZIP de SlideFlow (par ex., `index.html`, `script.js`, `style.css`, `images/`, `video/`) dans le dossier de votre projet de site web.
  2. Modifiez votre page HTML existante pour inclure les fichiers de SlideFlow. Ajoutez le code suivant là où vous voulez que SlideFlow apparaisse :
    3. <!-- Inclure les fichiers de SlideFlow -->
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Conteneur SlideFlow -->
<div class="slideshow-container" id="slideshow-container">
    <div class="drop-area" id="drop-area">
        <p>Glissez-déposez vos images ou vidéos ici</p>
    </div>
</div>
<div class="controls"><!-- Ajoutez les contrôles comme dans index.html --></div>
<div class="progress-bar" id="progress-bar"></div>
<div class="settings-sidebar" id="settings-panel"><!-- Ajoutez le panneau des paramètres comme dans index.html --></div>
<div class="dots-container" id="dots-container"></div>
<audio id="background-audio" loop></audio>
  3. Vérifiez que les chemins vers `style.css`, `script.js` et les dossiers de support (`images/`, `video/`) sont corrects par rapport à votre fichier HTML.
  4. Testez la page dans un navigateur pour vous assurer que SlideFlow se charge et fonctionne correctement dans votre site web.
2. Ajouter SlideFlow comme page autonome
  1. Téléchargez tout le dossier SlideFlow (contenant `index.html`, `script.js`, `style.css`, `images/`, `video/`, etc.) sur votre serveur web.
  2. Accédez à SlideFlow via une URL comme `https://votre-site.com/slideflow/`.
  3. Personnalisez `index.html` ou ses fichiers de support selon le design ou le domaine de votre site web.

Remarque : Assurez-vous que votre serveur web prend en charge HTML5, JavaScript et les fichiers multimédias (JPG, PNG, MP4, WEBM) pour une fonctionnalité complète.

Questions fréquentes (FAQ)

Q : Puis-je personnaliser les couleurs et les polices ?
R : Oui, vous pouvez personnaliser les couleurs via le Panneau des paramètres. La personnalisation des polices est prévue pour des mises à jour futures.

Q : Puis-je exporter le diaporama en vidéo ?
R : Actuellement, l’exportation en vidéo n’est pas prise en charge, mais elle est en développement pour une future version.

Q : Comment recevoir les mises à jour ?
R : Toutes les mises à jour futures sont incluses gratuitement avec votre achat—suivez nos canaux de support pour les annonces.

Q : Quels navigateurs sont pris en charge ?
R : SlideFlow fonctionne sur Google Chrome, Mozilla Firefox, Microsoft Edge et Safari (les dernières versions sont recommandées).

Support technique

Envoyez vos questions ou problèmes via notre formulaire Google ci-dessous. Les réponses seront envoyées à votre adresse e-mail dans un délai de 24-48 heures.

Formulaire de support
Logo SlideFlow

SlideFlow - Guía del usuario

Crea presentaciones impresionantes con facilidad

Guía de inicio rápido

  1. Descarga y descomprime el archivo ZIP de SlideFlow en una carpeta de tu computadora.
  2. Abre `index.html` en un navegador web moderno (por ejemplo, Chrome, Firefox, Edge o Safari).
  3. Arrastra y suelta tus imágenes o videos en el área de soltar, o usa el botón "Upload Media" ().
  4. Personaliza tu presentación con transiciones, colores y posiciones de texto a través del Panel de ajustes (haz clic en ).
  5. Reproduce tu presentación haciendo clic en "Play Slideshow" (), y navega manualmente con "Anterior" () y "Siguiente" ().

Características principales

Integración con sitios web existentes

Agregar SlideFlow a una página de sitio web existente o como página autónoma

Puedes integrar SlideFlow en una página de sitio web existente o usarlo como una página autónoma. Aquí te explicamos cómo:

1. Integrar SlideFlow en una página de sitio web existente
  1. Copia todos los archivos del paquete ZIP de SlideFlow (por ejemplo, `index.html`, `script.js`, `style.css`, `images/`, `video/`) en la carpeta de tu proyecto de sitio web.
  2. Edita tu página HTML existente para incluir los archivos de SlideFlow. Agrega el siguiente fragmento de código donde desees que aparezca SlideFlow:
    3. <!-- Incluir archivos de SlideFlow -->
<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Contenedor de SlideFlow -->
<div class="slideshow-container" id="slideshow-container">
    <div class="drop-area" id="drop-area">
        <p>Arrastra y suelta imágenes o videos aquí</p>
    </div>
</div>
<div class="controls"><!-- Agrega los controles como en index.html --></div>
<div class="progress-bar" id="progress-bar"></div>
<div class="settings-sidebar" id="settings-panel"><!-- Agrega el panel de ajustes como en index.html --></div>
<div class="dots-container" id="dots-container"></div>
<audio id="background-audio" loop></audio>
  3. Asegúrate de que las rutas a `style.css`, `script.js` y las carpetas de apoyo (`images/`, `video/`) sean correctas en relación con tu archivo HTML.
  4. Prueba la página en un navegador para asegurarte de que SlideFlow se carga y funciona correctamente dentro de tu sitio web.
2. Agregar SlideFlow como página autónoma
  1. Sube toda la carpeta de SlideFlow (conteniendo `index.html`, `script.js`, `style.css`, `images/`, `video/`, etc.) a tu servidor web.
  2. Accede a SlideFlow a través de una URL como `https://tusitio.com/slideflow/`.
  3. Personaliza `index.html` o sus archivos de apoyo según el diseño o el dominio de tu sitio web.

Nota: Asegúrate de que tu servidor web soporte HTML5, JavaScript y archivos multimedia (JPG, PNG, MP4, WEBM) para una funcionalidad completa.

Preguntas frecuentes (FAQ)

P: ¿Puedo personalizar colores y fuentes?
R: Sí, puedes personalizar los colores desde el Panel de ajustes. La personalización de fuentes está en desarrollo.

P: ¿Puedo exportar la presentación como video?
R: Actualmente, la exportación como video no está soportada, pero está en desarrollo para una versión futura.

P: ¿Cómo recibo actualizaciones?
R: Todas las actualizaciones futuras son gratuitas con tu compra—sigue nuestros canales de soporte para anuncios.

P: ¿Qué navegadores son compatibles?
R: SlideFlow funciona en Google Chrome, Mozilla Firefox, Microsoft Edge y Safari (se recomiendan las últimas versiones).

Soporte técnico

Envía tus preguntas o problemas a través de nuestro formulario de Google a continuación. Las respuestas se enviarán a tu correo electrónico en un plazo de 24-48 horas.

Formulario de soporte