HTML中为赞助伙伴Div添加左右滚动按钮并修复轮播显示问题

Got it, let's tackle this problem—your current carousel setup uses fade animations which don't let users browse all partners continuously. We'll refactor it to a horizontal scrollable container with working prev/next buttons, and fix the nested HTML issue in your original code too.

Step 1: Refactored Full Code #

Here's the complete working code with HTML, CSS, and JavaScript:

HTML #

<section class="sponser-area section-padding" id="sponsors">
  <div class="container text-center">
    <div class="row">
      <div class="page-title">
        <h2>Insurance Partners</h2>
        <p>Consectetuer adipiscing elit, sed diam nonummy</p>
      </div>
      
      <!-- Scrollable Container -->
      <div class="sponser-scroll-container">
        <div class="sponser-items">
          <div class="sponser-item">
            <a href="#" title="sensile medical"><img src="images/sponser/01_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="medical"><img src="images/sponser/02_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="medical logo"><img src="images/sponser/03_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="hospital logo"><img src="images/sponser/04_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="hospital logo"><img src="images/sponser/15_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="hospital logo"><img src="images/sponser/16_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="hospital logo"><img src="images/sponser/17_sponser.jpg" alt="Helth plus"></a>
          </div>
          <div class="sponser-item">
            <a href="#" title="hospital logo"><img src="images/sponser/23_sponser.jpg" alt="Helth plus"></a>
          </div>
        </div>
        
        <!-- Prev/Next Controls -->
        <button class="scroll-control prev-btn" aria-label="Previous">
          <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
        </button>
        <button class="scroll-control next-btn" aria-label="Next">
          <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </div>
</section>

CSS #

.sponser-scroll-container {
  position: relative;
  overflow-x: hidden;
  margin: 20px auto;
  max-width: 100%;
}

.sponser-items {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  padding: 10px 0;
  scroll-behavior: smooth;
}

.sponser-item {
  flex: 0 0 auto;
  width: 180px; /* Adjust based on your image size */
  text-align: center;
}

.sponser-item img {
  max-width: 100%;
  height: auto;
}

/* Scroll Control Buttons */
.scroll-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.scroll-control:hover {
  background: rgba(255,255,255,1);
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const scrollContainer = document.querySelector('.sponser-scroll-container .sponser-items');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const scrollAmount = 200; // Adjust based on your item width + gap

  prevBtn.addEventListener('click', function() {
    scrollContainer.scrollBy({
      left: -scrollAmount,
      behavior: 'smooth'
    });
  });

  nextBtn.addEventListener('click', function() {
    scrollContainer.scrollBy({
      left: scrollAmount,
      behavior: 'smooth'
    });
  });
});

Key Changes Explained #

• Fixed HTML Nested Error: Your original code had a sponser-item nested inside another one—this caused broken layout, so I fixed the closing tags.
• Replaced Carousel with Scroll Container: Removed Bootstrap's carousel classes and added a sponser-scroll-container with overflow-x:hidden to create a horizontal viewport.
• Flexbox Layout: The .sponser-items uses display:flex with nowrap to keep all partners in a single horizontal row.
• Working Controls: Replaced the old carousel links with buttons that trigger smooth scrolling via JavaScript. The scrollAmount can be adjusted to match your item width + gap for perfect scrolling steps.
• Responsive & Accessible: Buttons have aria-label for screen readers, and the scroll behavior is smooth for better UX.

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