gallery-carousel

Summary

Edge-to-edge four-up Slick carousel of clinic photos with arrow controls, autoplay enabled. Each tile is a Magnific Popup lightbox trigger so clicking opens the full image.

HTML structure (minimal)

<section class="gallery pt-0 pb-90">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="slick-carousel"
             data-slick='{"slidesToShow":4,"slidesToScroll":1,"autoplay":true,"arrows":true,"dots":false,"responsive":[{"breakpoint":992,"settings":{"slidesToShow":2}},{"breakpoint":767,"settings":{"slidesToShow":2}},{"breakpoint":480,"settings":{"slidesToShow":1}}]}'>
          <a class="popup-gallery-item" href="assets/images/gallery/1.jpg">
            <img src="assets/images/gallery/1.jpg" alt="gallery img">
          </a>
          <a class="popup-gallery-item" href="assets/images/gallery/2.jpg">
            <img src="assets/images/gallery/2.jpg" alt="gallery img">
          </a>
          <!-- 3, 4, 5, 6 -->
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.gallery {
  .slick-carousel {
    margin: 0 -10px;
    .slick-slide { padding: 0 10px; }
  }
  .popup-gallery-item {
    display: block; border-radius: 8px; overflow: hidden;
    img { width: 100%; transition: transform .6s ease; }
    &:hover img { transform: scale(1.06); }
  }
  .slick-arrow {
    width: 50px; height: 50px; border-radius: 50%; background: $color-primary; color: $color-white;
    z-index: 2;
  }
}

Animation logic

// Magnific Popup gallery init in plugins.js:
$('.gallery .slick-carousel').magnificPopup({
  delegate: '.popup-gallery-item',
  type: 'image',
  gallery: { enabled: true },
  mainClass: 'mfp-fade'
});

Notable details

• The carousel uses arrows: true AND autoplay: true — most templates pick one. Here it works because the arrows are pinned outside the tile bleed, so they don't fight the autoplay rhythm.
• Magnific Popup picks up the gallery items via the delegate selector, meaning new images dropped inside the carousel automatically join the lightbox without re-init.
• The 4-up grid plus 6 source images means the autoplay loops smoothly without visible "snap back" at the end.

Use when

• Photo galleries that should both "browse" inline (carousel) and "view full" (lightbox) without separate UI for each.
• Healthcare, real-estate, hospitality, restaurants — anywhere imagery is the main proof point and you don't want a static grid.

Caveats

• Magnific Popup is unmaintained; modern projects should use Fancybox 5 or GLightbox.
• Autoplay is loud in accessibility terms — consider exposing a pause control or honouring prefers-reduced-motion.