Logo
LiveChat

Loading..

How to Create Simple Slider by using HTML and CSS

simple card design

Creating a slider using only HTML and CSS without JavaScript can be achieved by using the HTML elements along with CSS for styling. Here's a step-by-step guide to creating a simple CSS-only slider:

  1. Set Up Your HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Create Simple Slider by using HTML and CSS | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="main-box">
    <div class="container">
      <div class="image-container">
        <img src="/simple-card-user.png" alt="" />
      </div>
      <h2>Employee Name</h2>
      <p>https://www.assignmenthippo.com/</p>
    </div>
    <div class="container">
      <div class="image-container">
       <img src="/simple-card-user.png" alt="" />
      </div>
      <h2>Employee Name</h2>
      <p>https://www.assignmenthippo.com/</p>
    </div>
    <div class="container">
      <div class="image-container">
        <img src="/simple-card-user.png" alt="" />
      </div>
      <h2>Employee Name</h2>
      <p>https://www.assignmenthippo.com/</p>
    </div>
    <div class="container">
      <div class="image-container">
        <img src="/simple-card-user.png" alt="" />
      </div>
      <h2>Employee Name</h2>
      <p>https://www.assignmenthippo.com/</p>
    </div>
    <div class="container">
      <div class="image-container">
        <img src="/simple-card-user.png" alt="" />
      </div>
      <h2>Employee Name</h2>
      <p>https://www.assignmenthippo.com/</p>
    </div>
  </section>
</body>
</html>
  1. Style Your Slider with CSS:

Create a CSS file (e.g., styles.css) to style your slider. You can adjust these styles to match your design preferences:


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
::-webkit-scrollbar {
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb {
  background: #fb5d94;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f440cd;
}
.main-box {
  display: flex;
  gap: 12px;
  max-width: 1000px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-padding: 30px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.main-box .container {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: start;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.container .image-container {
  height: 150px;
  width: 150px;
  padding: 4px;
  background: #f1f1f1;
  border-radius: 50%;
}
.image-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}
.container h2 {
  margin-top: 25px;
  color: #333;
  font-size: 22px;
  font-weight: 600;
}
.container p {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  text-align: center;
}
  1. Test Your CSS-Only Slider:

Open your HTML file in a web browser to see your CSS-only image slider in action.

This guide provides a basic foundation for creating a slider using only HTML and CSS. You can further enhance and customize the slider's appearance and functionality to meet your specific requirements.