Full Width Slider using Swiper JS
September 27, 2024 • 4 min read

Full Width Slider using Swiper JS

SwiperSwiper SeriesJavaScript
share this article on

Swiper.js is a powerful and flexible touch slider that enables you to build responsive sliders for websites. In this tutorial, we will walk through creating a full-width image slider using Swiper.js, where each slide contains an image and a title. We’ll also include navigation buttons and pagination for user interaction. Placeholder images will be used to simplify the setup.

1. Setting Up the Basic HTML Structure

We’ll start by setting up the basic HTML structure for the Swiper slider. This includes importing the necessary Swiper.js stylesheets and JavaScript, creating the slider’s container, and defining individual slides.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full-width Swiper Slider</title>
  <!-- Importing Swiper CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <!-- Swiper Container -->
  <div class="swiper">
    <div class="swiper-wrapper">
      <!-- Individual Slides -->
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/1200x800" alt="Milky Way">
        <div class="swiper-slide-content">
          <div class="swiper-slide-title">Milky Way</div>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/1200x800" alt="Earth Sunlight">
        <div class="swiper-slide-content">
          <div class="swiper-slide-title">Earth Sunlight</div>
        </div>
      </div>
      <div class="swiper-slide">
        <img src="https://via.placeholder.com/1200x800" alt="Universe Sky Stars">
        <div class="swiper-slide-content">
          <div class="swiper-slide-title">Universe Sky Stars</div>
        </div>
      </div>
      <!-- Add more slides as needed -->
    </div>

    <!-- Pagination and Navigation Controls -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</body>
</html>

Explanation:

Swiper Container: The main container for the slider is defined by the div with the class .swiper. Inside this container, we have a swiper-wrapper that contains all the slides.

Swiper Slides: Each slide is wrapped in a div with the class .swiper-slide. Inside the slide, we have an img tag to display the image, and a content block (.swiper-slide-content) that holds the title of the slide (.swiper-slide-title).

Pagination & Navigation Controls: Swiper’s built-in pagination and navigation buttons (.swiper-button-prev and .swiper-button-next) are added for easy user control. Pagination bullets will also display for users to switch between slides.

2. Adding Placeholder Images Instead of using actual images, we are using placeholder images provided by Placeholder.com. The path https://via.placeholder.com/1200x800 is a dummy URL that provides images of 1200px width and 800px height. These images can be easily replaced with real images when integrating the slider into a project.

Each slide has a unique title, such as “Milky Way” or “Earth Sunlight,” which appears on top of the image.

3. Styling the Slider with CSS Now that we’ve set up the HTML, we need to style the slider to make it responsive and visually appealing. Here’s the CSS that controls the appearance of the Swiper slider:

html, body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  color: #fff;
  line-height: 1.5;
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-prev, .swiper-button-next {
  color: #fff;
}

.swiper-slide-content {
  position: absolute;
  left: 32px;
  bottom: 32px;
  max-width: calc(100% - 64px);
}

.swiper-slide-title {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.25;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
}

.swiper-pagination {
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 0px;
  border-radius: 4px;
  border: 2px solid #333;
}

.swiper-pagination-bullet, .swiper-pagination-bullet-active {
  background: chartreuse;
}

Key Styles:

Full-Height Layout: Both html and body elements are set to 100% height, allowing the slider to occupy the full viewport height.

Centered Slide Content: Each .swiper-slide uses flexbox to center the content both horizontally and vertically.

Image Fit: The img tag is styled with object-fit: cover, ensuring that the images stretch to cover the entire slide area while maintaining their aspect ratio.

Custom Slide Title: The title of each slide (.swiper-slide-title) is styled with a bold font and positioned at the bottom-left of each slide, providing a dynamic overlay.

Pagination Customization: The bullets for pagination have been styled with a chartreuse color to stand out against the dark background.

4. Swiper.js Configuration To make the slider interactive, we use the Swiper.js library. The following JavaScript snippet initializes the slider and adds important functionalities like autoplay, pagination, and navigation:

<script>
  const swiper = new Swiper('.swiper', {
    autoplay: {
      delay: 2000,  // Slide auto-plays every 2 seconds
    },
    navigation: {
      nextEl: '.swiper-button-next',  // Next button control
      prevEl: '.swiper-button-prev',  // Previous button control
    },
    pagination: {
      el: '.swiper-pagination',  // Pagination bullets
      dynamicBullets: true,  // Dynamic bullet resizing
    }
  });
</script>

Explanation of Key Features:

Autoplay: The slider will automatically transition between slides every 2000 milliseconds (2 seconds). This can be adjusted by changing the delay value.

Navigation: The nextEl and prevEl settings allow the user to manually navigate through slides using the next and previous buttons.

Pagination: Pagination bullets are dynamically generated to match the number of slides. The dynamicBullets option resizes the active bullet to make it more visible.

5. Conclusion

This tutorial demonstrated how to create a full-width image slider using Swiper.js with simple placeholder images. Swiper.js is an easy-to-use, flexible library that allows you to create interactive, touch-enabled sliders for websites. You can expand on this example by adding more slides, customizing the autoplay speed, or changing the pagination style. Once you’re comfortable with the basics, you can replace the placeholder images with actual images from your project.

By following this guide, you’ll be able to implement a fully functional, responsive Swiper slider on your own website, giving it a dynamic and modern look.

Back to Articles