Slider images

Sliders display a rotating series of images on your website pages. Follow the file requirements and steps below to ensure smooth transitions between your images.

File requirements

Before creating your graphics, confirm your files meet these requirements:

• Format: All image files must be .jpg.
• Dimensions: Every image in the slider must share the exact same width and height (for example, 980×240 pixels). Resize images in an external photo editor — such as Fotor or Pixlr — before uploading.
• File names: Do not use spaces in file names. Spaces convert to "%" in HTML and can cause formatting conflicts. Use underscores (_) or hyphens (-) instead.

Adding images to your slider

1. Open the slider widget editor
   Place your cursor immediately after the last image in the editor.
2. Insert an image
   Select the Image button at the bottom of the editor. Choose an existing file from your Media Manager or upload a new .jpg file.

3. Add each additional image
   Without clicking elsewhere or pressing Enter/Return, select the Image button again immediately to insert the next image. Repeat for each image you want to add. 

   Note: Images must sit back-to-back with no spaces or line breaks between them. Any spacing corrupts the slider loop.

Linking slider images

To keep the code clean, add all images first and save before adding links.

1. Add all slider images back-to-back following the steps above, then select Save.
2. Re-open the editor and select the image you want to link.
3. Select the Insert/Edit Link icon in the toolbar.
4. Paste your destination URL into the pop-up window and select Insert.
5. Repeat steps 2–4 for each image you want to link.

Troubleshooting

• Images overlapping or disappearing: Stray code or unexpected spaces have corrupted the widget loop. Open the widget's HTML view and check for these common causes:
  • Stray HTML spaces: Pressing the spacebar, Enter/Return, or pasting text can generate hidden <p>, </p>, or <br> tags. Delete these tags so the <img> tags sit directly next to each other.
  • Dead links: Leftover link code from deleted or replaced images can cause the slider to fail. Delete any empty or orphaned <a> tags from the backend code.