寻求带缩略图导航及缩略图分页功能的Slider组件

Got it, let's build exactly the slider you need—one with a paginated thumbnail navigation that shows 4 thumbnails at a time (out of 16 total) and lets you switch between pages. This solution is self-contained, no external libraries required, and matches the structure you referenced.

Complete Code Implementation #

HTML Structure #

We'll expand on your base structure to include the thumbnail pagination controls and full thumbnail list:

<div id="gallery-wrapper">
  <!-- Main Image Viewer -->
  <div id="viewer-wrapper">
    <div id="gallery-viewer">
      <img alt="Image 1" src="images/image1.png" class="active">
    </div>
  </div>

  <!-- Paginated Thumbnail Navigation -->
  <div id="thumbnail-nav">
    <button class="nav-btn prev-btn">&lt;</button>
    <div class="thumbnail-container">
      <div class="thumbnail-list">
        <!-- 16 Thumbnails Total -->
        <div class="thumbnail-item">
          <img src="images/image1-thumb.png" data-full="images/image1.png" alt="Thumbnail 1">
        </div>
        <div class="thumbnail-item">
          <img src="images/image2-thumb.png" data-full="images/image2.png" alt="Thumbnail 2">
        </div>
        <div class="thumbnail-item">
          <img src="images/image3-thumb.png" data-full="images/image3.png" alt="Thumbnail 3">
        </div>
        <div class="thumbnail-item">
          <img src="images/image4-thumb.png" data-full="images/image4.png" alt="Thumbnail 4">
        </div>
        <div class="thumbnail-item">
          <img src="images/image5-thumb.png" data-full="images/image5.png" alt="Thumbnail 5">
        </div>
        <div class="thumbnail-item">
          <img src="images/image6-thumb.png" data-full="images/image6.png" alt="Thumbnail 6">
        </div>
        <div class="thumbnail-item">
          <img src="images/image7-thumb.png" data-full="images/image7.png" alt="Thumbnail 7">
        </div>
        <div class="thumbnail-item">
          <img src="images/image8-thumb.png" data-full="images/image8.png" alt="Thumbnail 8">
        </div>
        <div class="thumbnail-item">
          <img src="images/image9-thumb.png" data-full="images/image9.png" alt="Thumbnail 9">
        </div>
        <div class="thumbnail-item">
          <img src="images/image10-thumb.png" data-full="images/image10.png" alt="Thumbnail 10">
        </div>
        <div class="thumbnail-item">
          <img src="images/image11-thumb.png" data-full="images/image11.png" alt="Thumbnail 11">
        </div>
        <div class="thumbnail-item">
          <img src="images/image12-thumb.png" data-full="images/image12.png" alt="Thumbnail 12">
        </div>
        <div class="thumbnail-item">
          <img src="images/image13-thumb.png" data-full="images/image13.png" alt="Thumbnail 13">
        </div>
        <div class="thumbnail-item">
          <img src="images/image14-thumb.png" data-full="images/image14.png" alt="Thumbnail 14">
        </div>
        <div class="thumbnail-item">
          <img src="images/image15-thumb.png" data-full="images/image15.png" alt="Thumbnail 15">
        </div>
        <div class="thumbnail-item">
          <img src="images/image16-thumb.png" data-full="images/image16.png" alt="Thumbnail 16">
        </div>
      </div>
    </div>
    <button class="nav-btn next-btn">&gt;</button>
  </div>
</div>

CSS Styling #

This sets up the layout, hides overflow for the thumbnail container, and adds basic interactivity styles:

#gallery-wrapper {
  max-width: 800px;
  margin: 2rem auto;
  font-family: Arial, sans-serif;
}

/* Main Viewer Styles */
#viewer-wrapper {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

#gallery-viewer img {
  width: 100%;
  height: auto;
  display: block;
}

/* Thumbnail Navigation Styles */
#thumbnail-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-btn {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.2s;
}

.nav-btn:hover {
  background: #e0e0e0;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.thumbnail-container {
  flex: 1;
  overflow: hidden;
  border-radius: 4px;
}

.thumbnail-list {
  display: flex;
  width: 400%; /* 4 pages × 100% each */
  transition: transform 0.3s ease;
}

.thumbnail-item {
  width: 25%; /* 4 items per page = 100% / 4 */
  padding: 0.25rem;
  box-sizing: border-box;
}

.thumbnail-item img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.thumbnail-item img.active {
  border-color: #2196F3;
}

JavaScript Logic #

Handles pagination navigation, thumbnail selection, and state management:

document.addEventListener('DOMContentLoaded', function() {
  const thumbnailList = document.querySelector('.thumbnail-list');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const thumbnailItems = document.querySelectorAll('.thumbnail-item img');
  const mainViewer = document.querySelector('#gallery-viewer img');

  let currentPage = 0;
  const totalPages = 4; // 16 items / 4 per page = 4 pages

  // Update button states based on current page
  function updateBtnStates() {
    prevBtn.disabled = currentPage === 0;
    nextBtn.disabled = currentPage === totalPages - 1;
  }

  // Switch thumbnail page
  function switchPage(page) {
    currentPage = page;
    const translateAmount = -currentPage * 25; // 25% per page
    thumbnailList.style.transform = `translateX(${translateAmount}%)`;
    updateBtnStates();
  }

  // Switch main image when thumbnail is clicked
  function switchMainImage(thumbnail) {
    // Remove active class from all thumbnails
    thumbnailItems.forEach(img => img.classList.remove('active'));
    // Add active class to clicked thumbnail
    thumbnail.classList.add('active');
    // Update main viewer image
    mainViewer.src = thumbnail.dataset.full;
    mainViewer.alt = thumbnail.alt.replace('Thumbnail', 'Image');
  }

  // Add event listeners
  prevBtn.addEventListener('click', () => {
    if (currentPage > 0) switchPage(currentPage - 1);
  });

  nextBtn.addEventListener('click', () => {
    if (currentPage < totalPages - 1) switchPage(currentPage + 1);
  });

  thumbnailItems.forEach(img => {
    img.addEventListener('click', () => switchMainImage(img));
  });

  // Initialize: disable prev button and set first thumbnail as active
  updateBtnStates();
  thumbnailItems[0].classList.add('active');
});

Key Features & Customization Tips #

• Paginated Thumbnails: The thumbnail list uses a 400% width (for 4 total pages) and smooth transform transitions to slide between pages.
• Interactive Feedback: Active thumbnails get a colored border, and navigation buttons disable when you reach the first/last page.
• Easy Tweaks:
  • To change thumbnails per page: Adjust .thumbnail-item width (e.g., 20% for 5 per page) and update totalPages in the JS.
  • Swap out src and data-full attributes with your actual image paths.
  • Modify CSS colors, padding, and borders to match your design system.

This solution is lightweight, easy to adapt, and exactly fits your requirement of 16 thumbnails with 4 visible at a time via pagination.

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