selected-work-slider

Summary

Featured-projects gallery built from a Slick "title" carousel synced with a Slick "image" carousel and a vertical tag list. The current project's title appears in display-2 type, its preview fills two-thirds of the row, and the tag chips below mirror the slide. PREV / NEXT links and a "20 25" year mark sit underneath, with a faint mountain illustration ghosted across the background.

HTML structure (minimal)

<div class="section-selected-work flat-spacing pb-0" id="workScroll">
  <div class="bg-img"><img src="assets/images/item/mountain.png" alt=""></div>
  <div class="content-wrap-1">
    <div class="container"><div class="row">
      <div class="col-md-4">
        <p class="mini-title text-caption text-white-64">SELECTED WORKS</p>
        <div class="slick-nav">
          <div><p class="text-slide text-display-2 fw-semibold">Future</p></div>
          <div><p class="text-slide text-display-2 fw-semibold">NexoPay</p></div>
          <div><p class="text-slide text-display-2 fw-semibold">Seeson</p></div>
        </div>
      </div>
      <div class="col-md-8">
        <div class="slick-for">
          <div><div class="image"><img src="assets/images/section/work-1.jpg" alt=""></div></div>
          <div><div class="image"><img src="assets/images/section/work-2.jpg" alt=""></div></div>
          <div><div class="image"><img src="assets/images/section/work-3.jpg" alt=""></div></div>
        </div>
      </div>
    </div></div>
  </div>
  <div class="content-wrap-2">
    <div class="container"><div class="row">
      <div class="col-md-4"><ul class="work-tag"><!-- group of pill links per slide --></ul></div>
      <div class="col-md-4"><div class="group-btn-slider">
        <div class="btn-nav-swiper nav-prev-swiper"><i class="icon icon-arrow-long-left"></i> PREV</div>
        <div class="btn-nav-swiper nav-next-swiper">NEXT <i class="icon icon-arrow-long-right"></i></div>
      </div></div>
      <div class="col-md-4"><p class="text-display-2 fw-semibold">20<span class="text-primary">25</span></p></div>
    </div></div>
  </div>
</div>

Key SCSS tokens

.section-selected-work {
  position: relative;

  .bg-img {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    img { width: 100%; object-fit: cover; }
  }

  .content-wrap-2 {
    position: relative;
    z-index: 2;
    padding-bottom: 20px;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
    }
  }
}

Animation logic

// assets/js/carousel.js — slick init pairs .slick-nav and .slick-for via asNavFor.
// Tag list is keyed to slide index by SCSS — `.work-tag li:nth-child(n)` maps to the active slide.

Notable details

• Three carousels are linked: the title list (.slick-nav), the image strip (.slick-for), and a CSS-driven tag column. The current slide is the only one whose tags become visible (active class).
• The mountain background image is both decorative and acts as a soft visual anchor between sections — its bottom is feathered into pure black with content-wrap-2::before linear-gradient.
• Slides are duplicated (Clone 1/Clone 2) in markup so Slick's infinite:true has fewer visual jumps when wrapping.

Use when

• Portfolio "selected works" rails where the hero word is the project name itself, not a generic heading.
• When you want the tag list to feel like an editorial caption strip rather than a pill chip cloud.

Caveats

• Both carousels use Slick (jQuery), not Swiper — keep both libraries on the page if you mix-and-match.
• The "20 25" year is hardcoded; rotating it requires editing the markup.