industries-loop-carousel

Summary

"Industries" section — an Elementor Pro Loop Carousel widget pulling from an "Industry" CPT. Eight slides scroll horizontally with an image / illustration on each, plus a label ("SaaS", "Agencies", "eCommerce", etc.). Drag-to-scroll on desktop, swipe on mobile.

HTML structure (minimal)

<section class="industries">
  <header class="industries__head">
    <p class="eyebrow">Industries</p>
    <h2 class="industries__title">Teams we've worked with.</h2>
  </header>

  <div class="swiper industries__swiper">
    <div class="swiper-wrapper">
      <article class="swiper-slide industry">
        <img src="/img/industries/saas.jpg" alt="">
        <h3 class="industry__label">SaaS</h3>
      </article>
      <article class="swiper-slide industry">
        <img src="/img/industries/agencies.jpg" alt="">
        <h3 class="industry__label">Agencies</h3>
      </article>
      <article class="swiper-slide industry">
        <img src="/img/industries/ecom.jpg" alt="">
        <h3 class="industry__label">eCommerce</h3>
      </article>
      <!-- … -->
    </div>
  </div>
</section>

Key SCSS tokens

.industries {
  padding: 96px 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
}
.industries__head {
  padding: 0 32px;
  max-width: 1200px;
  margin: 0 auto 48px;
}
.industries__title {
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.1;
}
.industry {
  width: 280px;
  flex-shrink: 0;
}
.industry img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
}
.industry__label {
  font-size: 20px;
  font-weight: 500;
  margin-top: 16px;
}

Animation logic

import Swiper from 'swiper';
import { FreeMode } from 'swiper/modules';

new Swiper('.industries__swiper', {
  modules: [FreeMode],
  slidesPerView: 'auto',
  spaceBetween: 16,
  freeMode: { enabled: true, momentum: true },
});

Notable details

• Same Loop Carousel widget powers BOTH this section and the blog carousel — one widget, two CPTs. Big design-system saving.
• slidesPerView: 'auto' with fixed slide width gives a "shelf of books" feel: the user sees the next slide peeking, which invites the swipe.
• freeMode (not snap-scroll) makes the drag feel mechanical rather than slide-by-slide — better for taxonomies where each slide isn't a "card to read".
• Slide aspect-ratio: 4/5 keeps images portrait — denser horizontal information, more like a magazine spread than a hero gallery.

Use when

• You have 6+ items in a category list and want horizontal browsing rather than a vertical grid.
• The items are visual (industries with images, products, projects) rather than copy-heavy.
• You're already in an Elementor Pro environment and can reuse the Loop Carousel widget.

Caveats

• Loop Carousel is Elementor Pro only — outside that environment you write the Swiper init by hand (~10 lines).
• freeMode on a touchpad can feel unsnappy; test with real mice / trackpads before shipping.
• Slide height varies if labels wrap to two lines; pin a min-height on .industry__label to avoid carousel jitter.