Adding a Slider/Carousel - Blogger Theme Dev Course

A slider or carousel is a great way to display multiple images or featured posts in a compact space. This is often used on homepages to grab the user's attention. We will build a simple, reusable slider component.

Live Example

Here is a live demonstration of the slider component we will be building. You can use the arrows to navigate or click the dots at the bottom.

Beautiful Mountain Landscape

Calm River Scene

A Loyal Companion

Misty Forest Morning

How to Implement in Blogger

To implement a slider in a Blogger theme, you typically need three parts:

HTML Structure: The basic markup for the slides, navigation buttons, and indicators. You can use a loop (`<b:loop>`) to generate slides from posts with a specific label, like "Featured".
CSS Styling: The styles to position the slides, arrows, and create the visual appearance.
JavaScript Logic: The script to handle the functionality: changing slides, responding to clicks, and adding animations.

Code Examples

xmlBasic HTML Structure for a Blogger Slider

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class='slider-container'>
  <div class='slider-slides'>
    <!-- Loop through posts with the 'Featured' label -->
    <b:loop values='data:posts where (p => p.labels any (l => l.name == "Featured"))' var='post'>
      <div class='slide'>
        <img expr:src='resizeImage(data:post.thumbnailUrl, 800, "16:9")'/>
        <div class='slide-caption'><data:post.title/></div>
      </div>
    </b:loop>
  </div>
  <button class='prev'>&#10094;</button>
  <button class='next'>&#10095;</button>
</div>

javascriptSample JavaScript for Slider Logic

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// This script should be placed just before the closing </body> tag
// and wrapped in CDATA.
 
const slider = document.querySelector('.slider-container');
const slides = slider.querySelectorAll('.slide');
const prevButton = slider.querySelector('.prev');
const nextButton = slider.querySelector('.next');
let currentIndex = 0;
 
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? 'block' : 'none';
  });
}
 
prevButton.addEventListener('click', () => {
  currentIndex = (currentIndex > 0) ? currentIndex - 1 : slides.length - 1;
  showSlide(currentIndex);
});
 
nextButton.addEventListener('click', () => {
  currentIndex = (currentIndex < slides.length - 1) ? currentIndex + 1 : 0;
  showSlide(currentIndex);
});
 
// Show the first slide initially
showSlide(currentIndex);

Pro Tip

For better performance, make sure to use Blogger's `resizeImage` operator to serve appropriately sized images for your slider.

Live Example

How to Implement in Blogger

Code Examples

Pro Tip

Was this lesson helpful?