Image/Video Slider

Image/Video Slider

Image/Video Slider

An image/video slider is a dynamic user interface element commonly found on websites, featuring a carousel or slideshow format to display multiple images or videos in a single area. It allows users to view content sequentially through navigation controls like arrows or dots, with options for automatic or manual transition between slides. Sliders are versatile for showcasing products, portfolios, or promotional content, offering visual engagement and enhancing the user experience with responsive design.

Here is a short video on how the Image/Video Slider works:


How to create an interactive Image/Video Slider?

To create an Image/Video Slider, follow these steps:

  1. Click on the "Create" button located in the Image/Video Slider section.
  2. You will be redirected to the page mentioned below, where you can start building your Image/Video Slider.
  







 Once the form is open, you’ll see the following fields to complete:


  1.  Interactive Title: Enter a title or name for your Image/Video Slider. This title appears at the top and serves as a label for the entire set of slides.

  2. Image/Video: Add images or videos to build your slider. Each slide acts as a visual element that users can navigate through, helping you present multimedia content in an engaging and dynamic way.

  3. Caption: A caption is required for each image or video. Use this field to add descriptive text or titles that provide context and help viewers better understand the media being displayed.
 Upload Image:
  1.  When the user selects “Click here to add media” within the section, all previously uploaded images stored in the Editor platform will be displayed for easy selection.
  1. If users want to add new images to the Image Slider, they can upload them using the “Click to upload a new interactive image/video” option, which allows them to seamlessly import and use their own media files.

  2. Additionally, users can insert images directly from the web by using the External Image Link option and entering the image URL.





 Upload Video:

  1. We support uploading videos from YouTube, Vimeo, or any external link, making it easy to include the media you need in your slider.

    To add a YouTube video:

    1. Paste the YouTube URL into the YouTube link input field.

    2. Click the Next button.

    3. You will be redirected to a page where you can enter a title for the video.

    4. Click Add at the bottom to include the video in your slider


Add Section for Image/Video slider:

The Image/Video Slider form includes collapsible sections that make organizing your media simple and intuitive.
  1. Click the Add Section button to insert a new section directly below the current one. Once added, a + (Add Section Below) icon will appear on the section line for quick access.
  2. Reordering Sections: You can move a section up or down using the arrow icons. This lets you position sections exactly where you want them without needing to drag them manually.
  3. To remove a section, click the Delete icon on the section line. A Remove Section confirmation window will appear—select Remove to permanently delete that section.
  4. These features make it easy to structure, update, and manage your slider content efficiently.


Notes
Please Note: Whenever a new section is added, users will be redirected to this section, and will not be required to manually navigate around. Users will always be able to return to previous sections by scrolling up (when many sections are present).

Customize Options:

The Image/Video Slider includes the following customization options to help you tailor the look and feel of your content:

  1. Caption: Customize the text that appears below each image or video to provide context or descriptions.

  2. Icon: Choose or update the icon used within the slider for a more personalized visual style.

  3. Image/Video Background : Adjust the background behind your media to enhance contrast, visibility, and overall design.

Caption:

  1. The caption in the Image/Video Slider can be fully customized using various style options.

  2. You can modify the background color and text style through the menu and select a font family from the options available in both Loree and Loree Interactive for consistency.

  3. Text formatting such as font style, size, weight, alignment, and margin can also be adjusted.

  4. Font and background colors can be chosen from the color palette or entered using specific Hex or RGBA codes.

  5. Additionally, the caption can be positioned at either the top or bottom of the image or video to enhance the user experience.

  
 
Icon:
Icon customization includes

  1. Icon Type: Choose between square or circular icons to match your design aesthetic.

  2. Icon Color: Personalize icons with a range of colors to align with your branding or visual theme.

  3. Icon Size: Opt for default, medium, or large sizes to ensure icons are appropriately scaled for visibility and impact.

  4. Icon Alignment: Position icons as default, at the top, or at the bottom of your interactive elements for optimal display and user engagement.
 Image/Video Background:
  1. Offering the option to change the background of the image/video slider using a color palette enhances customization and visual appeal.

  2. Users can select from a variety of colors to personalize the slider's backdrop, ensuring it complements the content and overall design theme seamlessly.

  3. This feature allows for greater flexibility in adapting the slider to different contexts and preferences, enhancing the overall user experience. 
  


Preview

The PREVIEW option has been conveniently placed on the far right side corner of the form section for all the interactives.


THANK YOU!



    • Related Articles

    • Image Hotspot

      Image Hotspot An image hotspot interactive allows users to click on specific areas (hotspots) within an image to reveal additional information or media. This enhances user engagement by providing an intuitive and visually appealing way to explore ...

    • Release notes for Loree A2103.3

      Loree Issue fixed in Loree editor Embed URL responsive issue In Loree, previously when the embed URL was used it has some additional styles which affect the height and width of the video. This issue has been fixed and now the embedded video will be ...

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release Notes for Loree A2403.1

      Published on: 17/07/2024 LOREE INTERACTIVES REVAMP! We're excited to announce the release of our revamped Interactive Tool. This update brings enhanced functionality, improved user experience, and new features designed to help you get the most out of ...

    • How do I add an image?

      Images As a Loree Design user, selecting the images option will now give you multiple pre-defined options, which easily add images, images with text, or both in combination. Selecting one of the options below will add the content to the particular ...