如何让Slick Slider右侧最后一个滑块尺寸大于其他滑块？

Got it, let's tweak your Slick Slider to make the final slide stand out with a larger size! Here's a step-by-step solution that modifies your existing code:

Step 1: Add Custom CSS #

First, we'll use CSS to target the last slide and adjust its width, plus ensure all slides layout correctly:

/* Container styling to add padding and center the slider */
.scale_slick {
  margin: 0 auto;
  padding: 0 20px;
}

/* Style all slides except the last one with fixed width */
.scale_slick .slick-slide:not(:last-child) {
  width: 200px !important; /* Match your original image dimensions */
  margin-right: 15px; /* Add spacing between slides */
}

/* Enlarge the last slide */
.scale_slick .slick-slide:last-child {
  width: 300px !important; /* Adjust this value to your desired larger size */
  margin-right: 0; /* Remove extra margin from the end */
}

/* Ensure images fit their containers properly */
.scale_slick .slick-slide img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Optional: keeps image aspect ratio intact */
}

Step 2: Update Slick Slider JavaScript Settings #

We need to enable variableWidth (Slick's default behavior forces uniform slide widths) and adjust other settings to match the new layout:

$(".scale_slick").slick({
  slidesToShow: 3, // Shows 3 small slides + 1 large last slide
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  variableWidth: true, // Critical: allows slides to have different widths
  infinite: false, // Optional: disable infinite loop to avoid odd layout when looping
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        variableWidth: true
      }
    }
  ]
});

Full Modified Code #

Here's your complete HTML file with the changes applied:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Slick Slider</title>
    <link rel="stylesheet" href="./slick.css" />
    <link rel="stylesheet" href="./slick-theme.css" />
    <style>
        /* Container styling to add padding and center the slider */
        .scale_slick {
          margin: 0 auto;
          padding: 0 20px;
        }

        /* Style all slides except the last one with fixed width */
        .scale_slick .slick-slide:not(:last-child) {
          width: 200px !important; /* Match your original image dimensions */
          margin-right: 15px; /* Add spacing between slides */
        }

        /* Enlarge the last slide */
        .scale_slick .slick-slide:last-child {
          width: 300px !important; /* Adjust this value to your desired larger size */
          margin-right: 0; /* Remove extra margin from the end */
        }

        /* Ensure images fit their containers properly */
        .scale_slick .slick-slide img {
          width: 100%;
          height: auto;
          object-fit: cover; /* Optional: keeps image aspect ratio intact */
        }
    </style>
</head>
<body>
    <div class="scale_slick">
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/200" alt="" /></div>
        <div><img src="https://picsum.photos/300" alt="" /></div> <!-- Optional: use a larger image for the last slide -->
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" ></script>
    <script src="./slick.min.js"></script>
    <script>
        $(".scale_slick").slick({
            slidesToShow: 3, // Shows 3 small slides + 1 large last slide
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
            variableWidth: true, // Critical: allows slides to have different widths
            infinite: false, // Optional: disable infinite loop to avoid odd layout when looping
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        variableWidth: true
                    }
                }
            ]
        });
    </script>
</body>
</html>

Key Notes: #

• variableWidth: true is non-negotiable here — it overrides Slick's default behavior of forcing all slides to the same width.
• Adjust the width values in CSS to match your design needs (you can make the last slide as big as you want).
• If you want to keep the infinite loop, you'll need to duplicate the last slide at the beginning of your slider markup to avoid a jarring transition when it loops back.

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