स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

1909 Andev.web

संपादक में खोलें Video अपना कोड प्रकाशित करें

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

अनुशंसित

20 April 2024

HTML और CSS का उपयोग करके सोशल आइकन

17 July 2025

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

29 December 2025

इमेज स्लाइडर HTML CSS जावास्क्रिप्ट

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="profile-card">
  <h1>Castle</h1>
  <div class="wrapper">
    <div class="outer">
      <div class="card" style="--delay:-1;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1652466102358-7fc44c47bb94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:0;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1556621595-6dd9502e265e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:1;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1580677616212-2fa929e9c2cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1605887123413-2275edbe6dfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>

</div>
      <div class="card" style="--delay:2;">
        <div class="content">
          <div class="img">
            <img src="https://images.unsplash.com/photo-1599587997303-86d4294c5df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" alt="Neuschwanstein Castle">
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="menu-btn">
    <i class="fas fa-bars"></i>
  </button>
  <h2>Popular</h2>
  <div class="popular">
    <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Lakes">

<div class="content">
      <h3>Lakes</h3>
      <ul>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
      </ul>
      <p>Lakes are Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, dolorum...</p>
    </div>
  </div>
  <div class="popular">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mountains">

<div class="content">
      <h3>Mountains</h3>
      <ul>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
        <li><i class="fa-regular fa-star"></i></li>
      </ul>
      <p>Mountains are Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, dolorum...</p>
    </div>
  </div>
  <div class="more">
    <h2>Neuschwanstein</h2>
    <div class="tags">
      <span class="tag">
        castle
      </span>
      <span class="tag">germany</span>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus alias velit a incidunt, placeat accusantium deleniti sapiente amet laborum sit nihil maiores, nisi quaerat sunt nulla harum! Laboriosam fuga, modi, nisi velit sint unde ducimus dolor sit totam praesentium libero. Sequi aperiam doloribus rem deserunt alias vel. Corrupti at excepturi inventore veniam ullam accusantium laborum est nulla voluptatibus voluptates similique voluptatem eaque autem hic aliquam.</p>
    <ul class="icons">
      <li><a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
          </svg>
        </a></li>
      <li><a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
          </svg>
        </a>
      </li>
      <li>
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
          </svg>
        </a>
      </li>
    </ul>
  </div>
</div>

  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f0f0;
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-card {
  position: relative;
  width: 18em;
  background: #fff;
  box-shadow: 0 0 5em rgba(0, 0, 0, 0.2);
  padding: 2em 1em;
  overflow: hidden;
  border-radius: 0.7em;
}
.profile-card .profile-img {
  position: absolute;
  top: 5em;
  left: 50%;
  transform: translatex(-50%);
  width: 11em;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 1rem;
  z-index: 1;
  transition: 0.5s ease-in-out;
}
.profile-card h1 {
  font-size: 1.5rem;
}
.profile-card p {
  margin: 0.2em 0;
  color: #b8b8b8;
}
.profile-card h2 {
  margin-top: 16em;
  margin-bottom: 0.8em;
  font-size: 1.2rem;
}
.profile-card .popular + .popular {
  margin-top: 1em;
}
.profile-card .popular {
  position: relative;
  cursor: pointer;
  z-index: 0;
}
.profile-card .popular:before {
  position: absolute;
  content: "";
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 0.6rem;
}
.profile-card .popular img {
  width: 100%;
  position: relative;
  height: 4rem;
  object-fit: cover;
  border-radius: 0.6rem;
  display: block;
  top: 0;
  transition: 0.5s ease-in-out;
}
.profile-card .popular .content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-card .popular .content h3 {
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
}
.profile-card .popular .content p {
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.4;
  height: 0;
  overflow: hidden;
  -moz-animation-delay: 3.5s;
  -webkit-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
  margin-top: 0;
}
.profile-card .popular .content ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.profile-card .popular .content ul li i {
  color: #d9d9d9;
  font-size: 0.565rem;
}
.profile-card .menu-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  position: absolute;
  top: 1.6em;
  right: 1em;
  z-index: 556;
}
.profile-card .more {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 0;
  z-index: 555;
  overflow: hidden;
  color: #fff;
  padding: 0 1.5em;
  transition: 0.5s ease-in;
  background: rgba(0, 0, 0, 0.8);
}
.profile-card .more .tags {
  display: flex;
  align-items: center;
  gap: 0.625em;
  flex-wrap: wrap;
}
.profile-card .more .tags .tag {
  background: #5e5e5e;
  padding: 0.3125em 0.625em;
  border-radius: 0.3125em;
  font-size: 0.8rem;
  text-transform: capitalize;
}
.profile-card .more h2 {
  margin: 1em 0 0.5em;
}
.profile-card .more p {
  margin: 1.5em 0;
  color: #d6d6d6;
  line-height: 1.4;
}
.profile-card .more .icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
}
.profile-card .more .icons svg {
  width: 1.125rem;
  color: #fff;
}

.profile-card ::-webkit-scrollbar {
  width: 8px;
}

.profile-card ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.profile-card ::-webkit-scrollbar-thumb {
  background: #fff;
}

.profile-card ::-webkit-scrollbar-thumb:hover {
  background: #bcbcbc;
}

.popular.opened img {
  height: 12rem;
}
.popular.opened .content p {
  height: auto;
  margin-top: 10px;
}

.menu-btn.opened {
  color: #fff;
  background: #111;
  padding: 0.2em 0.4em;
}

.overlay.opened {
  height: 100%;
}

.more.opened {
  padding: 4em 1.5em 1.5em 1.5em;
  height: 100%;
  overflow-y: scroll;
}

.wrapper .card.opened {
  animation-play-state: paused;
}

.wrapper .outer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper .card {
  background: #fff;
  width: 140px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  justify-content: space-between;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
  animation: animate 15s linear infinite;
  animation-delay: calc(3s * var(--delay));
}
.wrapper .card:last-child {
  animation-delay: calc(-3s * var(--delay));
}
.wrapper .card a {
  text-decoration: none;
  padding: 7px 18px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
  transition: all 0.3s ease;
}
.wrapper .card a:hover {
  transform: scale(0.94);
}
.wrapper .card .img {
  height: 16em;
  width: 11em;
  position: absolute;
  top: 1.5em;
  right: 5em;
  border-radius: 1.2em;
  box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.wrapper .card .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.outer:hover .card {
  animation-play-state: paused;
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.5);
  }
  5%, 20% {
    opacity: 0.4;
    transform: translateX(100%) scale(0.7);
    pointer-events: none;
  }
  25%, 40% {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0%) scale(1);
  }
  45%, 60% {
    opacity: 0.4;
    transform: translateX(-100%) scale(0.7);
    pointer-events: none;
  }
  65%, 100% {
    opacity: 0;
    transform: translateX(-100%) scale(0.5);
  }
}

अनुशंसित

HTML और CSS का उपयोग करके सोशल आइकन

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

इमेज स्लाइडर HTML CSS जावास्क्रिप्ट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS