如何在Materialize中设置文本内容后的背景轮播（非Carousel）

Got it, let's break this down. You want fixed text that stays visible over a rotating background, and you don't want to rely on Materialize's built-in Carousel component. This is totally doable with custom CSS + a tiny bit of vanilla JS, while still leveraging Materialize's utility classes for styling.

Step 1: HTML Structure #

We'll use Materialize's utility classes (like white-text, flow-text, btn) for the text, and structure the background slides as a separate layer behind the fixed text:

<!-- Wrap everything in a container (Materialize utility) -->
<div class="container my-bg-carousel">
  <!-- Fixed Text Overlay (stays on top) -->
  <div class="carousel-text z-depth-3">
    <h2 class="white-text">Your Persistent Heading</h2>
    <p class="white-text flow-text">This text stays visible across all background slides, no matter which one is active!</p>
    <a class="btn waves-effect waves-light amber darken-2">Get Started</a>
  </div>

  <!-- Background Slides Layer -->
  <div class="bg-slides">
    <div class="slide active" style="background-image: url('your-first-image.jpg');"></div>
    <div class="slide" style="background-image: url('your-second-image.jpg');"></div>
    <div class="slide" style="background-image: url('your-third-image.jpg');"></div>
  </div>
</div>

Step 2: Custom CSS #

We'll position the text overlay above the background slides, and add smooth opacity transitions for the background fade effect. We'll also integrate Materialize's spacing/utility classes where it makes sense:

/* Base carousel container */
.my-bg-carousel {
  position: relative;
  height: 600px; /* Adjust this to your desired height */
  overflow: hidden;
  margin: 2rem 0; /* Materialize-like spacing */
}

/* Background slides wrapper */
.bg-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Individual slide styles */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out; /* Smooth fade transition */
}

/* Active slide is fully visible */
.slide.active {
  opacity: 1;
}

/* Fixed text overlay */
.carousel-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Ensures text stays above background */
  text-align: center;
  padding: 2.5rem;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background for readability */
  border-radius: 12px;
  width: 80%; /* Responsive width */
  max-width: 800px;
}

Step 3: Vanilla JS for Auto-Rotation #

If you want the background to switch automatically (no need for Materialize's Carousel JS), add this simple script:

document.addEventListener('DOMContentLoaded', function() {
  const slides = document.querySelectorAll('.slide');
  let currentSlideIndex = 0;

  // Function to switch to the next slide
  const switchSlide = () => {
    slides[currentSlideIndex].classList.remove('active');
    currentSlideIndex = (currentSlideIndex + 1) % slides.length;
    slides[currentSlideIndex].classList.add('active');
  };

  // Auto-switch every 5 seconds (adjust timing as needed)
  setInterval(switchSlide, 5000);
});

Bonus Tweaks (Using Materialize Features) #

• Add Materialize's responsive-img class to any image elements if you switch to <img> instead of background images
• Use hide-on-small-only or hide-on-med-and-down classes on the text to adjust visibility for mobile
• Tweak the button style with Materialize's color classes (like blue darken-3) to match your design
• Add a z-depth-4 class to the text overlay for a stronger shadow effect

内容的提问来源于stack exchange，提问作者BK94