Image slideshow (also known as image carousels or sliders) can be a convenient way to display multiple images, videos, or graphics on your website. The thought of big, beautiful, flashy image shows can be quite alluring. Compelling images can capture customer’s attention immediately.

Steps to Add a Slideshow:

1. Create Binary Files:

  • Create–>Technical–>Binary File
NameSample Values
LabelSlidehowImg1
App NameWebwb
File Typejpg
  • Select Slideshow image and save
  • Save as this rule and create for other slide show image binary files
NameSample Values
LabelSlidehowImg2
App NameWebwb
File Typejpg
NameSample Values
LabelSlidehowImg3
App NameWebwb
File Typejpg

2. Create Embed section:

  • Create–>User Interface–>Section
NameSample Values
LabelSlideshowforLaptops
Apply toO4zyqc-Sample-Work
Add to RulesetSample
  • Click create and open
  • Go to HTML tab & deselect “Auto-generated HTML”
  • In HTML source area include your html code for image slideshow
  • HTML code file url:

https://drive.google.com/drive/folders/10o_3jSNwIJiN795kMFcAVvyjlg0txyWY

  • Customize html code for change slideshow width, height, arrow mark colour based on your requirements
  • For more slideshow images, Create more binary files and customize the code

3. Configure Main Section:

  • App explorer–>Casetype–>User Interface–>Section–>Select your section you want to add Slideshow
  • Click “Convert to full section editor”
  • Drag & Drop embedded section into layout (layout–>Embed section)
  • In Section field select already created embed section and submit
  • Let’s preview (Action–>Preview)
  • Save & Run the case

Youtube Video: