Carousel guidance

Step 1: Prepare Your Image

Before touching the code, you must ensure your image is the correct size and hosted on the server.

• Dimensions: Your image must be 1400px wide by 466px high.
  • Note: Using different proportions will distort the carousel height and lead to a poor user experience.
• Upload to EdWeb: Add your image to the Media Library.
• Get the URL:

1. In the Media Overview, click the image filename to open the edit page.
2. Right-click the filename link (the actual file path) and select Copy Link Address.
3. Save this URL in a notepad or document for later. (Example: https://vet.ed.ac.uk/sites/default/files/2026-03/carousel-dog-hook.jpg)

Step 2: Editing the HTML Code

1. Download the Source: Get the latest HTML Template here.
2. Environment: Open this in a plain text editor (Notepad, TextEdit, VS Code) or Dreamweaver (recommended).
3. Deployment: You will eventually paste this finished code into the Custom HTML field in EdWeb.

Scenario A: Adding a New Slide

To add a slide, you need to update two things: the indicator button and the slide content.

1. Update the Indicators 

The indicators are the wee horizontal buttons, at the top-middle of the slides.

Find the <button> tags near the top of the code. Copy the last line and paste it directly below, then increase the numbers by one.

• Original: <button ... data-bs-slide-to="5" aria-label="Slide 6"></button>
• New Line: <button ... data-bs-slide-to="6" aria-label="Slide 7"></button>

2. Add the Slide Content

Copy all of the code block between <!-- SLIDE 1 --> and<!-- SLIDE 2 --> (as outlined in red above)

• To add to the start: Paste it before <!-- SLIDE 1 -->
• To add to the end: Paste it before <!-- END OF SLIDES -->

3. Customise the Content

Important! In what is now Slide 2 remove the active from <div class="carousel-item active”>. Only the first slide can be marked as active. 

Also, delete <div class="carousel-inner"> from the second slide. This tag should only appear at the start of Slide 1.

In your new block, update these four items:

1. Image URL: Paste your new image link between the quotes in <img src="...">.
2. Target Link: Paste the destination page URL between the quotes in <a href="...">.
3. Title: Change the text between the <h5>...</h5> tags.
4. Summary: Change the text between the <p>...</p> tags.

Save and View.

Scenario B: Replacing an Existing Slide

This is the quickest way to update content without changing the number of slides.

1. Identify the slide number you want to change (e.g., Slide 5).
2. Replace the Image: Swap the URL in the <img src="..."> tag.
3. Update the Link: Swap the URL in the <a href="..."> tag.
4. Update the Text: Edit the text inside the <h5> (Title) and <p> (Summary) tags.
5. Save and View.

Scenario C: Removing a Slide

If you want to reduce the total number of slides, you must clean up the indicators and the content.

1. Remove the Indicator: Delete the <button> line corresponding to the slide you are removing (usually the last one).
2. Delete the Content: Locate the slide block (e.g., everything between and) and delete it entirely.
3. Check the Sequence: If you delete a slide from the middle (e.g., Slide 3), you must manually re-number the remaining slides and indicators so they are sequential (1, 2, 3, 4...).

Important: If you remove the original first slide, you must designate the new first slide as "active." 
To do this, locate the first <div class="carousel-inner"> and ensure the following line reads:

<div class="carousel-item active">

Summary Table: Code Tags to Watch