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 Image/Video Slider Works:


How to create 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 find the following field to fill out,
  1. Interactive Title: This is where you enter a title or name for your Image/Video Slider. The title typically appears prominently at the top or serves as a label for the entire set of slides within the slider.
  2. Image/Video: Adding an image or video to an Image/Video Slider involves selecting visually compelling media that can engage viewers. Each slide serves as a visual element where users can interact by navigating through different images or videos. This feature enhances user engagement and provides a dynamic way to present multimedia content.
  3. Caption: A caption option for images or videos allows users to add descriptive text or titles that accompany the visual content. It enhances the viewer's understanding or context of the media being presented.
Upload Image:
When the user clicks on "Click here to add media" within the section, it will display all the existing uploaded images already inside the Editor platform.
If users wish to include their own images in the Image Slider, they must upload them as new files. The "Click to upload a new interactive image/video" option allows users to seamlessly upload and integrate their chosen media into the interactive slider.
Users can even use the 'External Image Link' option to add an image URL directly.
Upload Video:
We provide the capability to upload videos from YouTube, Vimeo, or an external link. With these options, you can easily upload the videos you need for the slider.
Paste the YouTube URL into the YouTube link input box. Click the "Next" button below. You will be redirected to the specified page where you can provide a title for the video and click the "Add" button at the bottom.
Add Section for Image/Video slider:
  1. The Image/Video slider form comes with collapsible sections. You can easily add a section by clicking on the 'Add Section' button, that allows the users to add a section immediately below the existing one. As soon as a new section is added, a + icon will be reflected on the Section Line stating ' Add Section Below'. Refer to the images below:
  2. Once a section is added, users can move a section up or down and place it above or below their desired section instead of dragging a section manually using the up or down arrow icons. 
  3. An added section can be deleted easily by clicking the 'Delete' icon that lies on the Section Line. Once this icon is clicked, 'Remove Section' window pops up  asking confirmation to delete the section, and clicking on the 'Remove'  option then deletes the particular section.
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:

Customization options allow users to personalize and adjust aspects such as fonts, colors, styles, and spacing to suit specific preferences or branding needs. They enhance visual appeal and usability, ensuring content or interfaces meet diverse user requirements effectively. For Image/video slider we are supporting these customize option.
1. Caption.
2. Icon.
3. Image/video.
Caption:
  1. The caption can be customized with different background colors and text styles using the menu.
  2. The font family can also be changed, with options available in both Loree and Loree Interactive for consistency.
  3. The font style, size, and weight can be adjusted, as well as the alignment and margin.
  4. Font color and background color options are available through a color palette menu, and specific codes can also be used.
  5. The caption can be positioned at the top or bottom of images or videos in the slider for a better 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 ...