portfolio-fade-swiper

Summary

Selected-works carousel using Swiper with progressbar pagination, slidesPerView: 'auto', 80px gaps and a 1500ms speed for slow drift. Each card is a rounded image with a two-line "sub-bg" caption that uses inline SVG quarter-circles to mimic notched corners. Below the slider, a wide "Our Portfolio" marquee fills the bleed.

HTML structure (minimal)

<section class="work-fade section-padding sub-bg bord-top-grd bord-bottom-grd">
  <div class="container position-re">
    <div class="sec-head mb-80">
      <div class="d-flex align-items-center">
        <div>
          <span class="sub-title main-color mb-5">Our Portfolio</span>
          <h3 class="fw-600 fz-50 text-u d-rotate wow">
            <span class="rotate-text">Selected <span class="fw-200">Works.</span></span>
          </h3>
        </div>
        <div class="ml-auto vi-more">
          <a href="/portfolio-gallery" class="butn butn-sm butn-bord radius-30"><span>View All</span></a>
          <span class="icon ti-arrow-top-right"></span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-2 d-flex align-items-end"><p>We help our client succeed by creating identities…</p></div>
      <div class="col-lg-9">
        <div class="work-swiper">
          <Swiper>
            <SwiperSlide>
              <div class="item">
                <div class="img"><img src="/assets/imgs/works/1.jpg" class="radius-15" alt="" /></div>
                <div class="cont">
                  <h3>
                    <span class="text sub-bg">
                      Project name
                      <span class="shap-left-top"><svg viewBox="0 0 11 11"><path d="M11 0L0 0L0 11C0 4.9 4.9 0 11 0Z" fill="#141414"/></svg></span>
                      <span class="shap-right-bottom"><svg viewBox="0 0 11 11"><path d="M11 0L0 0L0 11C0 4.9 4.9 0 11 0Z" fill="#141414"/></svg></span>
                    </span>
                    <span class="text sub-bg">
                      Brand Identity
                      <span class="shap-left-bottom"><svg viewBox="0 0 11 11"><path d="M11 0L0 0L0 11C0 4.9 4.9 0 11 0Z" fill="#141414"/></svg></span>
                    </span>
                  </h3>
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <div class="marq-head"><div class="main-marq xlrg text-u o-hidden"><!-- "Our Portfolio" marquee --></div></div>
</section>

Key SCSS tokens

.work-fade { background: $sub_bg; /* #121212 */ }
.work-swiper {
  .item .img { overflow: hidden; }
  .item .img img { transition: transform .8s ease; }
  .item:hover .img img { transform: scale(1.05); }
  .item .cont {
    position: absolute;
    left: 30px; bottom: 30px;
  }
  .item .cont .text.sub-bg {
    position: relative;
    background: $sub_bg;
    padding: 6px 14px;
    border-radius: 6px;
  }
  .shap-left-top    { position: absolute; left: -11px; top: 0;        }
  .shap-right-bottom{ position: absolute; right: -11px; bottom: 0;    }
  .shap-left-bottom { position: absolute; left: -11px; bottom: 0;     }
}

Animation logic

const swiperOptions = {
  modules: [Pagination, Navigation],
  slidesPerView: 'auto',
  spaceBetween: 80,
  loop: true,
  touchRatio: 0.2,
  speed: 1500,
  pagination: { el: '.work-crev .swiper-pagination', type: 'progressbar' },
  navigation:  { nextEl: '.work-crev .swiper-button-next', prevEl: '.work-crev .swiper-button-prev' },
};

Notable details

• The notched-corner trick: four 11x11 SVG quarter-circles fill the corners of each caption pill with a path that matches the section background (#141414/#121212), faking inner-radius corners that CSS can't produce on a single element.
• slidesPerView: 'auto' lets each slide width come from CSS (item .img { width: 600px }), so you can mix portrait and landscape ratios in one rail.
• 1500ms speed plus touchRatio: 0.2 makes drag feel weighty — closer to a film projector than a flick.

Use when

• Portfolio sections where each project deserves a two-line caption with a clear visual shape.
• When you want a slow auto-pace rather than a snappy snap-carousel.

Caveats

• Pagination/navigation selectors reference .work-crev but the markup uses .work-fade — verify selectors after copy-paste; the template's pagination element is empty under the slider but classed differently.
• The four corner SVGs hard-code their fill colour — change $sub_bg and update the fill attributes in JSX too.