Slider Template RealEstate | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Premium Real Estate | Luxury Properties</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 
</head>
<body class="overflow-x-hidden">

<section class="relative w-full " id="hero-slider">
    
    <div class="slide absolute inset-0 opacity-100" 
      style="background-image: url('https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&w=1400&q=80');">
      <div class="overlay w-full h-full flex items-center">
        <div class="slide-content">
          <span class="property-badge text-white">PREMIUM LISTING</span>
          <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">Find Your Dream Home</h1>
          <p class="text-lg md:text-2xl mb-6 text-white max-w-2xl">Luxury, comfort, and peace — all in one place. Discover our exclusive properties in prime locations.</p>
          
          <div class="property-features text-white">
            <div class="feature">
              <i class="fas fa-bed"></i>
              <span>4 Bedrooms</span>
            </div>
            <div class="feature">
              <i class="fas fa-bath"></i>
              <span>3 Bathrooms</span>
            </div>
            <div class="feature">
              <i class="fas fa-ruler-combined"></i>
              <span>2,800 sq ft</span>
            </div>
          </div>
          
          <div class="flex flex-col sm:flex-row gap-4 mt-8">
            <a href="#" class="cta-btn">
              <span>Explore Properties</span>
              <i class="fas fa-arrow-right"></i>
            </a>
            <a href="#" class="border border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all">
              Virtual Tour
            </a>
          </div>
        </div>
      </div>
    </div>

<div class="slide absolute inset-0 opacity-0" 
      style="background-image: url('https://images.unsplash.com/photo-1560185127-6ed189bf04bb?auto=format&fit=crop&w=1400&q=80');">
      <div class="overlay w-full h-full flex items-center">
        <div class="slide-content">
          <span class="property-badge text-white">INVESTMENT OPPORTUNITY</span>
          <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">Invest in Smart Properties</h1>
          <p class="text-lg md:text-2xl mb-6 text-white max-w-2xl">Modern apartments with world-class amenities. High ROI potential in growing neighborhoods.</p>
          
          <div class="property-features text-white">
            <div class="feature">
              <i class="fas fa-building"></i>
              <span>Apartment Complex</span>
            </div>
            <div class="feature">
              <i class="fas fa-swimming-pool"></i>
              <span>Pool & Gym</span>
            </div>
            <div class="feature">
              <i class="fas fa-shield-alt"></i>
              <span>24/7 Security</span>
            </div>
          </div>
          
          <div class="flex flex-col sm:flex-row gap-4 mt-8">
            <a href="#" class="cta-btn">
              <span>Book a Visit</span>
              <i class="fas fa-calendar-alt"></i>
            </a>
            <a href="#" class="border border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all">
              Investment Details
            </a>
          </div>
        </div>
      </div>
    </div>

<div class="slide absolute inset-0 opacity-0" 
      style="background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=80');">
      <div class="overlay w-full h-full flex items-center">
        <div class="slide-content">
          <span class="property-badge text-white">LUXURY VILLA</span>
          <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">Premium Villas for Modern Living</h1>
          <p class="text-lg md:text-2xl mb-6 text-white max-w-2xl">Experience nature, luxury, and innovation together in our exclusive villa community.</p>
          
          <div class="property-features text-white">
            <div class="feature">
              <i class="fas fa-home"></i>
              <span>5 Bedroom Villa</span>
            </div>
            <div class="feature">
              <i class="fas fa-tree"></i>
              <span>Private Garden</span>
            </div>
            <div class="feature">
              <i class="fas fa-car"></i>
              <span>3 Car Garage</span>
            </div>
          </div>
          
          <div class="flex flex-col sm:flex-row gap-4 mt-8">
            <a href="#" class="cta-btn">
              <span>View Villas</span>
              <i class="fas fa-search"></i>
            </a>
            <a href="#" class="border border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:bg-opacity-10 transition-all">
              Download Brochure
            </a>
          </div>
        </div>
      </div>
    </div>

<button class="nav-btn prev-btn">
      <i class="fas fa-chevron-left"></i>
    </button>
    <button class="nav-btn next-btn">
      <i class="fas fa-chevron-right"></i>
    </button>

<div class="absolute bottom-6 left-0 right-0 flex justify-center space-x-2 z-20">
      <div class="dot w-3 h-3 bg-white rounded-full cursor-pointer opacity-80 active"></div>
      <div class="dot w-3 h-3 bg-white rounded-full cursor-pointer opacity-50"></div>
      <div class="dot w-3 h-3 bg-white rounded-full cursor-pointer opacity-50"></div>
    </div>

<div class="slide-counter">
      <span id="current-slide">1</span> / <span id="total-slides">3</span>
    </div>

<div class="progress-bar"></div>
  </section>

</body>
</html>

CSS

.slide {
      background-size: cover;
      background-position: center;
      height: 100vh;
      transition: opacity 1s ease;
    }
    .overlay {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    }
    .slide-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .property-badge {
      background: rgba(236, 72, 153, 0.9);
      display: inline-block;
      padding: 0.5rem 1.5rem;
      border-radius: 2rem;
      margin-bottom: 1.5rem;
      font-weight: 600;
      letter-spacing: 1px;
      font-size: 0.875rem;
    }
    .property-features {
      display: flex;
      gap: 2rem;
      margin: 2rem 0;
    }
    .feature {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .feature i {
      color: #ec4899;
    }
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      cursor: pointer;
      z-index: 10;
      transition: all 0.3s ease;
    }
    .nav-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-50%) scale(1.1);
    }
    .prev-btn {
      left: 2rem;
    }
    .next-btn {
      right: 2rem;
    }
    .progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 4px;
      background: #ec4899;
      width: 100%;
      transform-origin: left;
    }
    .slide-counter {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      background: rgba(0, 0, 0, 0.4);
      padding: 0.5rem 1rem;
      border-radius: 2rem;
      z-index: 20;
    }
    .dot {
      transition: all 0.3s ease;
    }
    .dot.active {
      transform: scale(1.3);
      opacity: 1 !important;
    }
    .cta-btn {
      background: #ec4899;
      color: white;
      padding: 0.75rem 2rem;
      border-radius: 2rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
    }
    .cta-btn:hover {
      background: #db2777;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
    }
    @media (max-width: 768px) {
      .nav-btn {
        width: 40px;
        height: 40px;
      }
      .prev-btn {
        left: 1rem;
      }
      .next-btn {
        right: 1rem;
      }
      .property-features {
        flex-direction: column;
        gap: 1rem;
      }
      .slide-content {
        text-align: center;
      }
    }

JavaScript

Slider Template RealEstate Preview

Download Options