How to Add an Image Gallery or Slider to Your Website

An image gallery or slider lets you show several photos in one spot on a page, such as a product range, a portfolio of past work, or photos of your premises. A gallery displays images in a fixed grid, while a slider rotates through images automatically or when a visitor clicks an arrow. How you add one depends on whether your site runs on WordPress or was built with custom HTML.

Choosing Between a Gallery and a Slider

A gallery works well when you want visitors to see several images at once, such as a product catalogue. A slider is better for a small number of featured images, like a homepage banner, since only one image is visible at a time. Avoid putting too many images in a slider: visitors rarely wait through more than 3-5 slides.

Adding a Gallery or Slider in WordPress

Using the Built-In Gallery Block

WordPress includes a gallery feature with no extra plugin needed.

1. Open the page or post you want to edit and click the + icon to add a block.
2. Search for and select Gallery.
3. Click Upload to add new photos, or Media Library to pick images you've already uploaded.
4. Arrange the images by dragging them, then adjust the number of columns in the block settings on the right.
5. Click Update or Publish to save your changes.

Adding a Slider With a Plugin

WordPress doesn't include a slider by default, so you'll need a plugin.

1. In your WordPress dashboard, go to Plugins, then Add New Plugin.
2. Search for a slider plugin (several free options are available in the plugin directory).
3. Click Install Now, then Activate.
4. Open the plugin's settings from the left-hand menu and create a new slider, adding your images and choosing how fast they rotate.
5. Copy the shortcode or block the plugin gives you, and paste it into the page or post where you want the slider to appear.

Stick to one slider plugin. Having more than one active at the same time can slow your site down or cause the sliders to clash with each other.

Adding a Gallery or Slider on a Custom-Built Website

If your site isn't built on WordPress, you can still add a gallery with plain HTML and CSS, or use a lightweight free script for a slider.

1. Upload your images to a folder in your site's file manager, for example an images folder inside public_html.
2. Open the HTML file for the page in File Manager's code editor, or edit it on your computer and re-upload it.
3. For a basic gallery, add an image tag for each photo inside a container, then use CSS to display them side by side in a grid (for example, setting the container to display: flex or display: grid with wrapping enabled).
4. For a slider, a free, well-documented JavaScript library is the simplest route: include its script and stylesheet files, then follow its setup instructions to turn your images into a rotating slider.

Always keep a backup copy of your HTML file before editing it directly, in case you need to undo a change.

Keep It Fast-Loading

A gallery or slider adds several images to a single page, which can slow it down if the files are large. Resize and compress your photos before uploading them, and where your gallery plugin or slider library supports it, turn on lazy loading so images only load as the visitor scrolls to them. See How to Optimize Images to Make Your Website Load Faster for more detail on this.