Back to top
A photograph of UEA campus buildings in the background with blue skies and white clouds

Article

Image sliders

Add scrolling banners to promote events, campaigns and more.

content

What are sliders?

Sliders allow you to easily promote events and other union activities using imagery.

How do I create one?

Manually

  1. Find the page you want to add a slider to and upload your images to your page.
  2. Copy the code below and paste it into the source view of your page.
  3. Replace the image paths with the images you've just uploaded.
  4. Replace the URLs with the specific URLs for your slider items.

<ul class="slider-container">
	<li><a href="/"><img alt="Leaves" src="https://images.unsplash.com/photo-1646308070537-93e4b51f41d0?w=900&h=300&&auto=format&fit=crop" /> </a></li>
	<li><a href="/"><img alt="Leaves" src="https://images.unsplash.com/photo-1646308070503-a9acfebaac77?w=900&h=300&&auto=format&fit=crop" /> </a></li>
</ul>

Using a newslist widget

  1. Find the page you want to add a slider to and go into edit mode.
  2. Create a newslist widget and select the organisation you want to use.
  3. Add a specific tag if necessary to filter the news articles e.g. Welcome Festival.
  4. Set a specific width and height for the slider and set the image resize type to 'croptofit'.
  5. Add the 'slider-container' class to the widget beside the 'Wrapper div CSS class' field at the end.