How to Build a Responsive Slider With Swiper.js

Have you ever built an advanced slider for a project? If so, you might have taken advantage of any one of a number of JavaScript carousels. In the past, I’ve covered two of them: slick and Owl. Today, I’ll introduce another well-known one: Swiper.

Our Slider Project

Check what we’ll be building:

Please accept marketing cookies to load this content.

Be sure to open the demo on a large screen and resize your window to see how the page layout changes.

This tutorial has been updated with another demo that reveals a custom cursor on sliders’ hover—check out the demo below and the added extra section! Be sure to view the demo from a device with hover capability.

Please accept marketing cookies to load this content.

Jump to content in this section

What is Swiper Slider?
Getting Started With Swiper
Identify the Layout
Define the HTML Markup
Specify the Main Styles
Add the JavaScript
EXTRA: Custom Mouse Cursor

What is Swiper Slider?

Swiper is a free JavaScript plugin created by Vladimir Kharlampidi that lets you create modern, responsive sliders.

With almost 30k GitHub stars at the time of this writing, it’s considered one of the most dominant JavaScript plugins out there. To better understand its capabilities, check out the available demos.

Swiper isn’t only available for use with pure JavaScript. If you plan to build an app with one of the popular JavaScript frameworks (e.g. React) and need a slider, consider looking at the associated built-in Swiper component.

Getting Started With Swiper

To get started with Swiper, begin by downloading and installing the following files in your project:

swiper-bundle.css or its minified version
swiper-bundle.js or its minified version

You can grab a copy of these Swiper files by visiting the GitHub repo, using a package manager (e.g. npm), or loading the necessary assets through a CDN (e.g. cdnjs). For this tutorial, I’ll choose the last option.

For this tutorial, beyond the Swiper files, I’ve also incorporated Bootstrap 5’s CSS file.

With that in mind, if you look under the Settings tab of our demo pen, you’ll see that there are two external CSS files and one external JavaScript file.

1. Identify the Layout

To get started, let’s first identify the project scope.

Today’s demo is a web page dedicated to Tanzania, a country with immense beauty. To set up the page, we’ll grab some content from Wikipedia and images from Unsplash.

Let’s determine how the page layout will appear on various screens.

The Mobile Layout

On small screens (<768px), its appearance will be like this:

Notice that each slider shows the first slide and half of the second one.

The Tablet Layout

Next, on medium screens (≥768px), its appearance will change as follows:

Notice that the first slider shows the first two slides and half of the third one, while the second slider still shows two slides.

The Desktop Layout

Finally, on large screens (≥1200px), it will have this appearance:

Again, consider that the first slider shows the first three slides and half of the fourth one, while the second slider shows the first two slides and half of the third one.

Also, pay attention to another thing: the right side of the first slider is aligned to the container width that, as we’ll see, will be 1100px. In the same way, the left slide of the second slider is aligned to the container width.

The red area indicates the empty space that will be increased as the viewport becomes bigger and bigger.

2. Define the HTML Markup

The markup for our page will consist of four sections:

The first and third sections will contain info about Tanzania taken from Wikipedia.
The second and fourth sections will include two equal carousels that will display Tanzania through Unsplash photos. These sections will only have a different class that will determine their layout. That said, the second section will have the section-with-right-offset class, while the fourth section the section-with-left-offset one.

Here’s the page structure:

1	<section class="mt-5">
2	<div class="container">...</div>
3	</section>
4
5	<section class="section-with-carousel section-with-right-offset position-relative mt-5">
6	<div class="container">
7	<h2 class="mb-3">...</h2>
8	</div>
9	<div class="carousel-wrapper">
10	<div class="swiper">
11	<div class="swiper-wrapper">
12	<div class="swiper-slide">
13	<figure>
14	<img width="640" height="480" src="tanzania1.jpg" alt="">
15	<figcaption>
16	<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
17	<path d="M12 13.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path>
18	<path fill-rule="evenodd" d="M19.071 3.429C15.166-.476 8.834-.476 4.93 3.429c-3.905 3.905-3.905 10.237 0 14.142l.028.028 5.375 5.375a2.359 2.359 0 003.336 0l5.403-5.403c3.905-3.905 3.905-10.237 0-14.142zM5.99 4.489A8.5 8.5 0 0118.01 16.51l-5.403 5.404a.859.859 0 01-1.214 0l-5.378-5.378-.002-.002-.023-.024a8.5 8.5 0 010-12.02z"></path>
19	</svg>
20	Nungwi, Zanzibar, Tanzania
21	</figcaption>
22	</figure>
23	</div>
24	<!-- more slides here -->
25	</div>
26	</div>
27	</div>
28	<div class="carousel-controls">
29	<button class="carousel-control carousel-control-left" type="button">
30	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40">
31	<path fill-rule="evenodd" d="M10.78 19.03a.75.75 0 01-1.06 0l-6.25-6.25a.75.75 0 010-1.06l6.25-6.25a.75.75 0 111.06 1.06L5.81 11.5h14.44a.75.75 0 010 1.5H5.81l4.97 4.97a.75.75 0 010 1.06z"></path>
32	</svg>
33	</button>
34	<button class="carousel-control carousel-control-right" type="button">
35	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="40" height="40">
36	<path fill-rule="evenodd" d="M13.22 19.03a.75.75 0 001.06 0l6.25-6.25a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 10-1.06 1.06l4.97 4.97H3.75a.75.75 0 000 1.5h14.44l-4.97 4.97a.75.75 0 000 1.06z"></path>
37	</svg>
38	</button>
39	</div>
40	<div class="swiper-pagination"></div>
41	</section>
42
43	<section class="mt-5">
44	<div class="container">...</div>
45	</section>
46
47	<section class="section-with-carousel section-with-left-offset position-relative mt-5">
48	<!-- content same as second section -->
49	</section>

3. Specify the Main Styles

Let’s now concentrate on the most important styles of our page.

Here are the remarkable things:

The container will have a maximum width of 1100px.
The initial dimensions of the Unsplash images won't be equal. With that in mind, the carousel images will have a fixed height that will vary across the screen sizes. Here we'll use the object-fit: cover property value for fitting the images within the container. Alternatively, we could have added the images as background ones.
By default, all image captions will be hidden apart from the caption of the active slide. As the active slide changes, the associated caption will appear with small slide animation.

Here are the associated styles:

.container {
  max-width: 1100px;
}

.section-with-carousel .swiper-slide figure {
  position: relative;
  overflow: hidden;
}

.section-with-carousel .swiper-slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.section-with-carousel .swiper-slide figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(20%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 20px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.4s;
}

.section-with-carousel .swiper-slide figcaption svg {
  flex-shrink: 0;
  fill: white;
  margin-right: 10px;
}

.section-with-carousel .swiper-slide-active figcaption {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.section-with-carousel .carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 1;
}

.section-with-carousel .carousel-controls .carousel-control {
  opacity: 0.25;
  transition: opacity 0.3s;
}

.section-with-carousel .carousel-controls .carousel-control:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .section-with-carousel .swiper-slide img {
    height: 370px;
  }
}

@media (min-width: 1200px) {
  .section-with-carousel .swiper-slide img {
    height: 420px;
  }
  
  .section-with-carousel .carousel-controls {
    padding: 0 50px;
  }
}

The initial appearance of the dot navigation is this one:

Why not make it more informative and attractive? To achieve this, we’ll add some styles and update its default markup during the plugin initialization.

Here’s the updated navigation:

The required styles:

.section-with-carousel .swiper-pagination-bullets {
  position: static;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.section-with-carousel .swiper-pagination-bullets .swiper-pagination-bullet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  opacity: 0.5;
  margin: 0 8px;
  border-radius: 0;
  transition: opacity 0.3s;
}

.section-with-carousel
  .swiper-pagination-bullets
  .swiper-pagination-bullet
  .line {
  width: 3px;
  height: 3px;
  background: black;
  transition: transform 0.3s;
}

.section-with-carousel
  .swiper-pagination-bullets
  .swiper-pagination-bullet
  .number {
  opacity: 0;
  transform: translateY(-7px);
  transition: all 0.3s;
}

.section-with-carousel
  .swiper-pagination-bullets
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.section-with-carousel
  .swiper-pagination-bullets
  .swiper-pagination-bullet.swiper-pagination-bullet-active
  .line {
  transform: scaleX(8);
}

.section-with-carousel
  .swiper-pagination-bullets
  .swiper-pagination-bullet.swiper-pagination-bullet-active
  .number {
  opacity: 1;
  transform: none;
}

Be sure to click on a dot to see the little slide animation that happens.

4. Add the JavaScript

At this point, we’re ready to turn our attention to JavaScript.

Offset Carousel Sections

As you can see from the previous visualizations, the carousel sections will be full-screen on screens up to 1199px wide. On larger screens, their left or right side will stop being full-screen and be aligned to the container width. As discussed earlier, this behavior will be determined by the section-with-left-offset and section-with-right-offset classes. This way, we’ll be able to generate unique layouts that won’t be limited to sections that follow a grid system.

Here’s the JavaScript code that implements this functionality:

createOffsets();
window.addEventListener("resize", createOffsets);

function createOffsets() {
  const sectionWithLeftOffset = document.querySelector(
    ".section-with-left-offset"
  );
  const sectionWithLeftOffsetCarouselWrapper = sectionWithLeftOffset.querySelector(
    ".carousel-wrapper"
  );
  const sectionWithRightOffset = document.querySelector(
    ".section-with-right-offset"
  );
  const sectionWithRightOffsetCarouselWrapper = sectionWithRightOffset.querySelector(
    ".carousel-wrapper"
  );
  const offset = (window.innerWidth - 1100) / 2;
  const mqLarge = window.matchMedia("(min-width: 1200px)");

  if (sectionWithLeftOffset && mqLarge.matches) {
    sectionWithLeftOffsetCarouselWrapper.style.marginLeft = offset + "px";
  } else {
    sectionWithLeftOffsetCarouselWrapper.style.marginLeft = 0;
  }

  if (sectionWithRightOffset && mqLarge.matches) {
    sectionWithRightOffsetCarouselWrapper.style.marginRight = offset + "px";
  } else {
    sectionWithRightOffsetCarouselWrapper.style.marginRight = 0;
  }
}

Initialize Swiper

This is the last required step to initialize Swiper. Here, we pass as part of the configuration object all our customizations. Look at the relevant code snippet below:

const sectionsWithCarousel = document.querySelectorAll(
  ".section-with-carousel"
);

for (const section of sectionsWithCarousel) {
  let slidesPerView = [1.5, 2.5, 3.5];
  if (section.classList.contains("section-with-left-offset")) {
    slidesPerView = [1.5, 1.5, 2.5];
  }
  const swiper = section.querySelector(".swiper");
  new Swiper(swiper, {
    slidesPerView: slidesPerView[0],
    spaceBetween: 15,
    loop: true,
    lazyLoading: true,
    keyboard: {
      enabled: true
    },
    navigation: {
      prevEl: section.querySelector(".carousel-control-left"),
      nextEl: section.querySelector(".carousel-control-right")
    },
    pagination: {
      el: section.querySelector(".swiper-pagination"),
      clickable: true,
      renderBullet: function (index, className) {
        return `<div class=${className}>
            <span class="number">${index + 1}</span>
            <span class="line"></span>
        </div>`;
      }
    },
    breakpoints: {
      768: {
        slidesPerView: slidesPerView[1]
      },
      1200: {
        slidesPerView: slidesPerView[2]
      }
    }
  });
}

As you can see, we pass in an array the number of slides that should appear depending on the viewport width. By using, not only integers but also decimals, we’ll be able to show just a portion of a slide.

Even though it isn’t necessary, the breakpoint values that determine when the number of visible slides changes will match Bootstrap’s breakpoints. Anyhow, be sure to read the API documentation to get a better understanding of what all these configuration parameters do.

EXTRA: Custom Mouse Cursor

Let’s now adjust our demo to showcase a custom cursor each time we hover over a slider.

The custom cursor that will appear on sliders' hover

In actual fact, this isn’t the first time we discuss custom cursors effects. Both I and Jemima have written tutorials about it in the past.

Concerning the current development, let’s highlight the key aspects:

We'll use the generic pointermove event to detect the hovered element. Note that in this case, the mousemove event won't work as expected. This has only to do with how Swiper.js works. A workaround as per this Stack Overflow thread is to keep the mousemove event and pass touchStartPreventDefault: false to the slider config object. However, this solution breaks the swipe functionality on Firefox. Of course, there might be other solutions. Consider the problematic use case in the following demo.

Please accept marketing cookies to load this content.

Pointer events are DOM events that detect interaction from a pointing input device such as a mouse, pen/stylus, or touchscreen.

We’ll show the cursor only if the hovered element is a descendant of the .carousel-wrapper one and the device from where we view the demo allows us to hover over it. To fulfil the last requirement, we’ll use the hover CSS4 media feature which has solid support. That said, as a generic rule, we expect desktop computers and laptops to show the cursor while smartphones don’t. Of course, here things can change under certain conditions like in case we use a stylus/pen on our phone. But let's keep things simple and don't add more strict rules to match all possible scenarios.

The boundaries for showing the custom cursor

By default, the cursor will be a fixed position element. We'll use the cursor-x and cursor-y CSS variables to update its top and left values based on the actual position of the mouse pointer.
We'll override the styles of the .carousel-controls element and create additional ones for the child arrows. As you can see from the visualization above, only the left arrow sits within the boundaries of the hovered area. Each time a user hovers over it, the cursor will disappear.

With all the above in mind, let’s examine the required additions in our initial demo:

1. HTML

First, we'll add the cursor markup:

1	<div class="cursor">
2	<img width="40" height="42" src="cursor-swipe.svg" alt="swipe indicator">
3	</div>

2. CSS

Then, we'll continue with the styles limiting them only to devices with hover support:

@media (hover: hover) {
  .section-with-carousel .carousel-wrapper {
    cursor: none;
  }
  
  .section-with-carousel .carousel-controls .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .section-with-carousel .carousel-controls .carousel-control-left {
    left: 50px;
  }

  .section-with-carousel .carousel-controls .carousel-control-right {
    right: 50px;
  }

  .cursor {
    position: fixed;
    left: var(--cursor-x);
    top: var(--cursor-y);
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: black;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
  }

  body.show-custom-cursor .cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

3. JS

We'll finish with the required JavaScript code:

const cursor = document.querySelector(".cursor");
const body = document.body;
const toggleClass = "show-custom-cursor";

function pointermoveHandler(e) {
  const target = e.target;
  if (
    e.target.closest(".carousel-wrapper") &&
    window.matchMedia("(hover: hover)").matches
  ) {
    body.classList.add(toggleClass);
    cursor.style.setProperty("--cursor-x", `${e.clientX}px`);
    cursor.style.setProperty("--cursor-y", `${e.clientY}px`);
  } else {
    body.classList.remove(toggleClass);
  }
}
document.addEventListener("pointermove", pointermoveHandler);

For better understanding, the original demo’s CSS and JS stayed untouched, and all the new code has been added at the bottom with proper comments.

Conclusion

And we’re done, folks! In this tutorial, we created an asymmetric page layout with just a few lines of JavaScript code and the power of Swiper.js.

We only covered just the very basics of this plugin. There are so many more advanced sliders that you can build with minimal effort. Just get some inspiration from a source like Dribbble and practice yourselves! This is the best way to learn!

Let’s look again at what we built:

Please accept marketing cookies to load this content.

As a bonus, we covered how to impress our visitors by adding an animated mouse cursor effect to the sliders. To make it a bit more accurate and limit the functionality only to desktop devices, we took advantage of a CSS4 media query. Of course, nothing stops you from incorporating this effect in your own sliders or pages.

Please accept marketing cookies to load this content.

As always, thanks a lot for reading!

FREE

48 Minutes

How to Build a Responsive Image Slider With Swiper.js

In this short course, you’ll learn how to use one of the easiest JavaScript slider libraries out there: Swiper.js.

How to Build a Responsive Slider With Swiper.js

Our Slider Project

What is Swiper Slider?

Getting Started With Swiper

1. Identify the Layout

The Mobile Layout

The Tablet Layout

The Desktop Layout

2. Define the HTML Markup

3. Specify the Main Styles

Customize Dot Navigation

4. Add the JavaScript

Offset Carousel Sections

Initialize Swiper

EXTRA: Custom Mouse Cursor

1. HTML

2. CSS

3. JS

Conclusion

More Slider, Lightbox, and Carousel Tutorials

How to Build a Responsive Image Slider With Swiper.js