Responsive Image Slider HTML CSS

This tutorial will guide you through creating a responsive image slider using HTML, CSS, and JavaScript. We’ll leverage the Swiper library for its ease of use and excellent responsiveness features. This is perfect for showcasing images or products on your website.

Step 1: Include Necessary Assets

First, we need to add the Swiper CSS library to your project. This will style the slider elements.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css'>

Step 2: Create the HTML Structure

Next, let’s build the basic HTML structure for our slider. This involves setting up the containers and image placeholders.

<section class="section slider-section">
  <div class="container slider-column">
    <div class="swiper swiper-slider">
      <div class="swiper-wrapper">
        <img class="swiper-slide" src="https://cdn.pixabay.com/photo/2022/11/13/18/09/canyon-7589820_1280.jpg" alt="Swiper">
        <img class="swiper-slide" src="https://cdn.pixabay.com/photo/2022/11/02/22/33/autumn-7566201_1280.jpg" alt="Swiper">
        <img class="swiper-slide" src="https://cdn.pixabay.com/photo/2023/04/05/09/44/landscape-7901065_1280.jpg" alt="Swiper">
        <img class="swiper-slide" src="https://cdn.pixabay.com/photo/2020/09/04/16/18/mountains-5544365_1280.jpg" alt="Swiper">
        <img class="swiper-slide" src="https://cdn.pixabay.com/photo/2022/12/09/22/55/trees-7646226_1280.jpg" alt="Swiper">
        <img class="swiper-slide" src="https://cdn.pixabay.com/photo/2019/09/13/11/47/mountains-4473760_1280.jpg" alt="Swiper">
      </div>
      <span class="swiper-pagination"></span>
      <span class="swiper-button-prev"></span>
      <span class="swiper-button-next"></span>
    </div>
  </div>
</section>
</main>

Step 3: Style with CSS

Now, let’s add some CSS to style our slider and make it visually appealing. This includes setting up the layout and visual elements.

:root {
  --white-100: hsl(206, 5%, 100%);
  --white-200: hsl(206, 5%, 90%);
  --white-300: hsl(206, 5%, 80%);
  --white-400: hsl(206, 5%, 65%);
  --white-500: hsl(206, 5%, 45%);
  --black-100: hsl(210, 20%, 10%);
  --black-200: hsl(210, 20%, 8%);
  --black-300: hsl(210, 20%, 6%);
  --black-400: hsl(210, 20%, 4%);
  --black-500: hsl(210, 20%, 1%);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  box-sizing: inherit;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black-500);
  background-color: var(--white-100);
}

main {
  overflow: hidden;
}

a,
button {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: none;
  outline: none;
  background: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.section {
  margin: 0 auto;
  padding-block: 5rem;
}

.container {
  max-width: 75rem;
  height: auto;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.swiper-button-next::after, .swiper-button-prev::after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 1rem;
  width: 2rem;
  height: 2rem;
  opacity: 0.75;
  border-radius: 50%;
  color: var(--white-100);
  background: var(--black-300);
}

Step 4: Add JavaScript Functionality

Finally, we’ll use JavaScript to make the slider work. This code will initialize Swiper and configure its settings (autoplay, navigation, responsiveness, etc.).

const swiper = new Swiper(".swiper-slider", {
  // Optional parameters
  centeredSlides: true,
  slidesPerView: 1,
  grabCursor: true,
  freeMode: false,
  loop: true,
  mousewheel: false,
  keyboard: {
    enabled: true
  },

  // Enabled autoplay mode
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  },

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
    dynamicBullets: false,
    clickable: true
  },

  // If we need navigation
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },

  // Responsive breakpoints
  breakpoints: {
    640: {
      slidesPerView: 1.25,
      spaceBetween: 20
    },
    1024: {
      slidesPerView: 2,
      spaceBetween: 20
    }
  }
});

Step 5: Include Footer Assets

Finally, add the following Swiper JS before closing the body tag.

<script src='https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js'></script>

Congratulations! You’ve successfully created a responsive image slider. Feel free to customize the images, styling, and Swiper settings to fit your specific needs.