带箭头的滑块导航实现求助：如何将现有代码修改为目标效果？

Hey there! Since you're new to CSS and want to swap out the dot navigation for arrow controls on your slider, let's walk through this together—super straightforward once you see the steps!

Step 1: Update Your HTML Structure #

First, let's replace those dot links with left/right arrow buttons. We'll add two buttons inside the .slider container, one for previous and one for next:

<div class="slider">
  <!-- Add arrow buttons here -->
  <button class="slider-btn prev-btn">←</button>
  <button class="slider-btn next-btn">→</button>
  
  <div class="slides">
    <div id="slide-1"> 1 </div>
    <div id="slide-2"> 2 </div>
    <div id="slide-3"> 3 </div>
    <div id="slide-4"> 4 </div>
    <div id="slide-5"> 5 </div>
  </div>
</div>

Step 2: Style the Arrow Buttons with CSS #

Now let's style these buttons to make them look good and sit in the right spots. We'll position them on the left and right edges of the slider, vertically centered:

* { box-sizing: border-box; }
.slider { 
  width: 300px; 
  text-align: center; 
  overflow: hidden;
  position: relative; /* Needed to position buttons inside */
}
.slides { 
  display: flex; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  scroll-behavior: smooth; 
  -webkit-overflow-scrolling: touch; 
}
.slides::-webkit-scrollbar { width: 10px; height: 10px; }
.slides::-webkit-scrollbar-thumb { background: black; border-radius: 10px; }
.slides::-webkit-scrollbar-track { background: transparent; }
.slides > div { 
  scroll-snap-align: start; 
  flex-shrink: 0; 
  width: 300px; 
  height: 300px; 
  margin-right: 50px; 
  border-radius: 10px; 
  background: #eee; 
  transform-origin: center center; 
  transform: scale(1); 
  transition: transform 0.5s; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 100px; 
}
.author-info { 
  background: rgba(0, 0, 0, 0.75); 
  color: white; 
  padding: 0.75rem; 
  text-align: center; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  margin: 0; 
}
.author-info a { color: white; }
img { 
  object-fit: cover; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

/* Style the arrow buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: white;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10; /* Make sure buttons sit above the slides */
}
.prev-btn {
  left: 10px;
}
.next-btn {
  right: 10px;
}
.slider-btn:hover {
  background: #ddd; /* Add hover effect for feedback */
}

/* Hide old dot navigation */
.slider > a {
  display: none;
}

html, body { 
  height: 100%; 
  overflow: hidden; 
}
body { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: linear-gradient(to bottom, #74ABE2, #5563DE); 
  font-family: 'Ropa Sans', sans-serif; 
}

Step 3: Add JavaScript to Make Arrows Functional #

CSS can't handle click-based scrolling between slides, so we need a tiny bit of JavaScript to listen for button clicks and move the slider. Add this right before your closing </body> tag:

const slider = document.querySelector('.slider');
const slidesContainer = slider.querySelector('.slides');
const prevBtn = slider.querySelector('.prev-btn');
const nextBtn = slider.querySelector('.next-btn');
const slideWidth = slidesContainer.querySelector('div').offsetWidth + 50; // Slide width + margin

prevBtn.addEventListener('click', () => {
  slidesContainer.scrollBy({
    left: -slideWidth,
    behavior: 'smooth'
  });
});

nextBtn.addEventListener('click', () => {
  slidesContainer.scrollBy({
    left: slideWidth,
    behavior: 'smooth'
  });
});

What This Does: #

• HTML: We added two buttons for left/right navigation, replacing the dot links.
• CSS: We positioned the buttons vertically centered on either side of the slider, added styling, and hid the old dot navigation.
• JavaScript: We calculate the width of one slide (including the margin), then use scrollBy to move the slider left or right by that amount when the buttons are clicked—behavior: 'smooth' keeps the nice scrolling animation you had before!

This should give you the arrow navigation you want, and it's easy to tweak the styles (like button size, color, or arrow icons) to match your design.

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