Slick.js：如何用for循环结合数组优化多画廊轮播页码代码

Hey there! I totally get the frustration of repetitive code when dealing with multiple Slick.js galleries — nothing makes a codebase messier than copying the same logic for every single ID. Let’s clean this up using loops and jQuery’s traversal methods, so you can scale this to as many galleries as you need without the clutter.

Option 1: Use a Shared Class (Cleanest Approach) #

First, update your HTML to add a shared class (like .gallery-slider) to all your gallery containers. This lets us target them all at once instead of listing every ID:

<!-- Example gallery elements with shared class -->
<div id="doc12-1" class="gallery-slider">
  <!-- Your slides here -->
</div>
<div class="pagingInfo"></div> <!-- Page count for doc12-1 -->

<div id="doc12-2" class="gallery-slider">
  <!-- Your slides here -->
</div>
<div class="pagingInfo"></div> <!-- Page count for doc12-2 -->

Then use jQuery’s .each() method to loop through each gallery and initialize Slick + pagination logic once:

$(document).ready(function() {
  // Loop through every gallery slider
  $('.gallery-slider').each(function() {
    // Store references to the current slider and its matching pagination element
    const $currentSlider = $(this);
    const $currentPaging = $currentSlider.next('.pagingInfo'); // Assumes paging is right after the slider

    // Initialize Slick with your base config
    $currentSlider.slick({
      dots: false, // Disable default dots if you're using custom pagination
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      // Add any other Slick options you need here
    });

    // Bind pagination update events
    $currentSlider.on('init reInit afterChange', function(event, slick, currentSlide) {
      // Handle edge case where currentSlide is undefined (initial load)
      const currentSlideNumber = currentSlide !== undefined ? currentSlide + 1 : 1;
      $currentPaging.text(`${currentSlideNumber} / ${slick.slideCount}`);
    });
  });
});

Option 2: Use an ID Array (If You Can’t Modify HTML) #

If you can’t add a shared class and need to keep using existing IDs, store all gallery IDs in an array and loop through that instead:

$(document).ready(function() {
  // List all your gallery IDs in this array
  const galleryIds = ['doc12-1', 'doc12-2', 'doc12-3', 'doc12-4']; // Add more as needed

  // Loop through each ID in the array
  galleryIds.forEach(function(galleryId) {
    const $currentSlider = $(`#${galleryId}`);
    // If your paging element has a matching ID (e.g., #paging-doc12-1), use this instead:
    // const $currentPaging = $(`#paging-${galleryId}`);
    const $currentPaging = $currentSlider.next('.pagingInfo');

    $currentSlider.slick({
      // Your Slick config here
      dots: false,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1
    });

    $currentSlider.on('init reInit afterChange', function(event, slick, currentSlide) {
      const currentSlideNumber = currentSlide !== undefined ? currentSlide + 1 : 1;
      $currentPaging.text(`${currentSlideNumber} / ${slick.slideCount}`);
    });
  });
});

Key Tips to Avoid Issues #

• Keep references local: By storing $currentSlider and $currentPaging inside the loop, you ensure each gallery’s pagination updates only its own count (no cross-contamination!).
• Handle initial load: The init event fires when Slick first loads, so we make sure to handle cases where currentSlide is undefined to avoid broken text.
• Customize paging placement: If your pagination element isn’t right after the slider, use a data attribute to link them. For example:

  <div id="doc12-1" class="gallery-slider"></div>
  <div class="pagingInfo" data-for-slider="doc12-1"></div>
  

  Then in JS, grab it with:

  const $currentPaging = $(`.pagingInfo[data-for-slider="${galleryId}"]`);
  

This approach cuts down on repetitive code and makes it easy to add new galleries later — just add the class (or ID to the array) and you’re good to go!

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