使用純css來建立一個滑塊

王铁柱6發表於2024-12-03
CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Slider</title>
<style>
.slider-container {
  width: 300px; /* Adjust as needed */
  position: relative;
  overflow: hidden; /* Hide overflowing content */
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Add smooth transition */
}

.slide {
  min-width: 100%; /* Each slide takes full width */
  flex-shrink: 0; /* Prevent slides from shrinking */
}

.slide img {
  width: 100%;
  display: block; /* Prevent image from creating extra space */
}

/* Navigation buttons */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 1; /* Ensure buttons are on top */
}

.slider-nav button {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}


/* Example styling for slides - adjust as needed */
.slide:nth-child(1) {
  background-color: lightblue;
}

.slide:nth-child(2) {
  background-color: lightcoral;
}

.slide:nth-child(3) {
  background-color: lightgreen;
}


/* JavaScript to handle slider logic (can be done with pure CSS, but less flexible) */
<script>
  const slider = document.querySelector('.slider');
  const prevButton = document.querySelector('.prev-slide');
  const nextButton = document.querySelector('.next-slide');
  let slideIndex = 0;

  nextButton.addEventListener('click', () => {
    slideIndex++;
    if (slideIndex > slider.children.length - 1) {
      slideIndex = 0;
    }
    updateSliderPosition();
  });

  prevButton.addEventListener('click', () => {
    slideIndex--;
    if (slideIndex < 0) {
      slideIndex = slider.children.length - 1;
    }
    updateSliderPosition();
  });

  function updateSliderPosition() {
    slider.style.transform = `translateX(-${slideIndex * 100}%)`;
  }
</script>

</style>
</head>
<body>

<div class="slider-container">
  <div class="slider">
    <div class="slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>
  </div>
  <div class="slider-nav">
    <button class="prev-slide">&lt;</button>
    <button class="next-slide">&gt;</button>
  </div>
</div>

</body>
</html>

Explanation and Key Improvements:

  • HTML Structure: Sets up the container, slider, individual slides, and navigation buttons. Uses image placeholders; replace "image1.jpg", etc. with your actual image URLs.
  • CSS Styling:
    • .slider-container: Provides the fixed width and hides overflowing slide content.
    • .slider: Uses display: flex and transition for the sliding animation.
    • .slide: min-width: 100% ensures each slide occupies the full width of the container. flex-shrink: 0 prevents slides from shrinking if the container is too narrow.
    • .slider-nav: Positions the navigation buttons absolutely over the slider.
    • Responsive Design Considerations: The width of the .slider-container is currently fixed. For responsive behavior, consider using percentage widths or viewport units (e.g., vw).
  • JavaScript Logic: This code handles the actual sliding functionality:
    • `slide

相關文章