How to add an image slider/gallery with captions in Blogger articles

Some things are told better with several images than with text, but placing images in a long row makes an article stretch and scroll on and on. An image slider/gallery solves this by gathering several images into one scrollable space. This article teaches you how to add one to a Blogger theme with BlogKub, with captions, navigation buttons, position dots, and swipe support on mobile.

Updated 16 July 2026   About a 9 minute read   Level: Beginner

What an image slider/gallery is, and what it solves

An image slider is a box that shows several images in one space, showing one at a time and letting readers scroll to the next with buttons, swipe, or by tapping the position dots. Instead of placing 6 or 7 images in a row until the article stretches like a kite tail, a slider gathers them all into one compact frame. Interested readers scroll through all of them, while those not interested can scroll past quickly.

This solves the space problem in articles with many images, such as an accommodation review that wants to show several angles, or a travel article with many beautiful images of one place. Using a slider keeps the content concise, smooth to read, and tidy, while still presenting all the images.

How BlogKub's slider works

When you add this block, the system embeds the slider's styles and script in the theme. When you place the slider structure in a post, the system makes it fully functional with these elements.

• Scroll-snap scrolling: each image "snaps" into place when scrolled, so it does not stop halfway, and swiping on mobile is smooth.
• Previous/next buttons: round buttons on both sides for desktop users who want to navigate by clicking.
• Position dots: dots below show which image out of the total you are viewing, and tapping jumps to that image. The current image's dot stretches into a bar to stand out.
• Caption under the image: the text in the figcaption shows over the bottom of the image on a dark gradient bar, easy to read without covering the main image.

All of this works together while you just place a simple HTML structure, and the system handles the interactive part for you.

How to add and use the image slider step by step

1. Add the image slider block. Open the left block library, the "Article & UX" category, and drag the "Image slider/gallery" block in, to embed the slider styles and script in the theme.
2. Export the XML and upload. Click Export, then take the file to blogger.com → Theme → three-dot menu → Backup/Restore → select the XML file.
3. Place the slider in a post. In HTML view, place a <div class="bk-slider">, then add several <figure><img src="..."><figcaption>caption</figcaption></figure> in a row for as many images as you want.
4. Test the navigation. Open a live article, click the previous/next buttons, tap the position dots, and try swiping on mobile, to confirm it scrolls smoothly and the captions show correctly.

Captions: adding context to images

An image with a caption is more powerful than a bare image, because the caption tells readers what they are looking at, where, or what is interesting. In BlogKub's slider, the caption sits over the bottom of the image on a gradient from transparent to dark, so the white text reads clearly whether the image behind is bright or dark.

Beyond helping readers, captions and image alt text are also good for accessibility and image SEO. When you describe images meaningfully, both screen reader users and image search engines understand the content better. If you are interested in making images discoverable, read the guidance on making images show in Google in the Lightbox guide too, since both are about presenting images in articles.

Slider vs Lightbox: they can be used together

Many readers wonder how a slider differs from a Lightbox. The answer is that the two do different jobs and complement each other.

• Slider: gathers several images in one space in the content, scrolling one at a time, ideal for presenting a set of images concisely.
• Lightbox: clicking an image to expand it full screen on a dark background, ideal when a reader wants to see the details of one image large.

Used together, readers can scroll through images in the slider for an overview, then click an image of interest to expand and see the details full screen, a complete image-viewing experience, ideal for articles where images are the star, such as travel, food, and accommodation reviews.

Considerations for speed and images

The slider itself is CSS and a small script, so it barely affects speed. But what really matters is the file size of the images, because a slider often has several images. If each is very large, the page loads slower. We recommend resizing and compressing images suitably before uploading, and setting meaningful file names and alt text.

Another technique is that Blogger already supports lazy loading in many cases, so images not yet scrolled to do not load immediately, helping the first page open faster. Managing images well is therefore the key to a slider that is both beautiful and fast, which is good for both readers and Core Web Vitals scores.

Examples of using the slider in different kinds of blogs

• Travel blogs: gather several angles of one place in a slider, with captions naming the spot or the best time to go.
• Accommodation/hotel reviews: show the room, view, and amenities in one slider, helping readers get an overview before deciding.
• Food blogs: images of cooking steps or several dishes at a restaurant, scrollable and concise.
• Creative/portfolio blogs: show several works in one gallery, with captions naming each piece.

Every case shares "several related images", which suits gathering into one slider more than a long row, because it keeps the article concise and presents the images with finesse.

When not to use a slider

Although a slider is useful, it is not the answer for every situation. In some cases, placing images normally is better, such as when each image is equally important and you want to be sure readers see all of them. Hiding images in a slider may leave some readers not scrolling through all of them. In this case, placing images in a row so all are visible may fit better.

Another case is when images are part of a sequence that must be read in order with accompanying text for each image. Splitting the images into a slider may break the connection between the image and its explanation. In short, use a slider when images are a "set viewed together" and readers can choose what to view, but if every image must be seen and tied to specific text, placing them normally communicates better. Choosing the right tool for the job is the heart of good presentation.

Common problems and how to fix them

The slider does not scroll or has no buttons

Check that you added the slider block and Exported again, and used the correct structure, that is bk-slider wrapping several figure elements, written in the post's HTML view. If you use the compose view, the structure may get converted so the slider does not work.

The images are cropped too much

The slider sets a consistent aspect ratio for tidiness. If source images differ a lot from the frame's ratio, they get cropped a lot. We recommend using images with similar ratios or close to the frame to reduce cropping.

The captions do not show

Check that you added text in the figcaption of each figure. If there is no figcaption, there is no caption to show, which is normal behavior.

The slider loads slowly

This is usually from image files being too large. Resize and compress images before uploading, because the number and size of images affects speed more than the slider itself.

Best practices

• Use images with similar ratios so the slider looks tidy and gets cropped less.
• Add meaningful captions and alt text to every image, for readers and image SEO.
• Resize and compress images before uploading to keep page speed.
• Use a slider for "a set of related images", not single images that do not need scrolling.
• Pair it with a Lightbox so readers can scroll through an overview and click to expand an image of interest.

Wrapping up

An image slider/gallery is a tool that keeps image-heavy articles concise, smooth to read, and presents images with finesse. With BlogKub you just add the slider block and Export it to use, then place a bk-slider structure with several figures, each with an img and a figcaption, and the system adds navigation buttons, position dots, captions under the images, and swipe support on mobile automatically. When you manage images at suitable sizes and add good captions, the slider tells a story with images beautifully and fast, especially in travel, food, review, and portfolio articles where images are the heart of the content.

Frequently asked questions (FAQ)

Part of the BlogKub feature guides, one article per feature covering the settings, the options and the problems people hit.