Examples

Common slider patterns and use cases.

Basic Image Carousel

A simple image carousel with navigation and loop.

<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-loop="true"
      data-swf-speed="500"
    >
      <div data-swf-element="item">
        <img src="image1.jpg" alt="Image 1" />
      </div>
      <div data-swf-element="item">
        <img src="image2.jpg" alt="Image 2" />
      </div>
      <div data-swf-element="item">
        <img src="image3.jpg" alt="Image 3" />
      </div>
    </div>
  </div>

  <div data-swf-element="navigation">
    <button data-swf-element="prev-arrow">Prev</button>
    <button data-swf-element="next-arrow">Next</button>
  </div>

  <div data-swf-element="pagination">
    <button data-swf-element="pagination-dot" class="dot"></button>
  </div>
</div>

Testimonial Slider with Autoplay

Auto-rotating testimonials with fade effect.

<div data-swf-component class="testimonials">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-autoplay="true"
      data-swf-autoplay-delay="5000"
      data-swf-effect="fade"
      data-swf-loop="true"
      data-swf-speed="600"
    >
      <div data-swf-element="item" class="testimonial">
        <blockquote>
          "This product completely transformed how we work.
          The team couldn't be happier with the results."
        </blockquote>
        <div class="author">
          <img src="avatar1.jpg" alt="Jane Doe" />
          <div>
            <strong>Jane Doe</strong>
            <span>CEO, Company Inc.</span>
          </div>
        </div>
      </div>

      <div data-swf-element="item" class="testimonial">
        <blockquote>
          "Outstanding support and an incredible product.
          We've seen 3x growth since implementing."
        </blockquote>
        <div class="author">
          <img src="avatar2.jpg" alt="John Smith" />
          <div>
            <strong>John Smith</strong>
            <span>CTO, Tech Corp</span>
          </div>
        </div>
      </div>

      <div data-swf-element="item" class="testimonial">
        <blockquote>
          "Best investment we've made this year.
          The ROI has been phenomenal."
        </blockquote>
        <div class="author">
          <img src="avatar3.jpg" alt="Sarah Wilson" />
          <div>
            <strong>Sarah Wilson</strong>
            <span>Director, Agency Co.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Responsive Product Grid

Product carousel that adapts to screen size.

<div data-swf-component class="products">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-bp-desktop="4"
      data-swf-bp-tablet="2"
      data-swf-bp-mobile="1"
      data-swf-gap="24"
      data-swf-loop="true"
    >
      <div data-swf-element="item" class="product-card">
        <img src="product1.jpg" alt="Product 1" />
        <h3>Product Name</h3>
        <p class="price">$99.00</p>
        <button>Add to Cart</button>
      </div>

      <div data-swf-element="item" class="product-card">
        <img src="product2.jpg" alt="Product 2" />
        <h3>Product Name</h3>
        <p class="price">$149.00</p>
        <button>Add to Cart</button>
      </div>

      <div data-swf-element="item" class="product-card">
        <img src="product3.jpg" alt="Product 3" />
        <h3>Product Name</h3>
        <p class="price">$79.00</p>
        <button>Add to Cart</button>
      </div>

      <div data-swf-element="item" class="product-card">
        <img src="product4.jpg" alt="Product 4" />
        <h3>Product Name</h3>
        <p class="price">$199.00</p>
        <button>Add to Cart</button>
      </div>

      <div data-swf-element="item" class="product-card">
        <img src="product5.jpg" alt="Product 5" />
        <h3>Product Name</h3>
        <p class="price">$129.00</p>
        <button>Add to Cart</button>
      </div>
    </div>
  </div>

  <div data-swf-element="navigation">
    <button data-swf-element="prev-arrow" class="nav-btn">←</button>
    <button data-swf-element="next-arrow" class="nav-btn">→</button>
  </div>
</div>

Mobile-Only Slider

Content displays as a grid on desktop, slider on mobile.

<div data-swf-component class="features">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-init="mobile"
      data-swf-gap="16"
      data-swf-centered="true"
    >
      <div data-swf-element="item" class="feature-card">
        <h3>Mobile First</h3>
        <p>Designed for mobile devices from the ground up.</p>
      </div>

      <div data-swf-element="item" class="feature-card">
        <h3>Lightning Fast</h3>
        <p>Optimized for speed and performance.</p>
      </div>

      <div data-swf-element="item" class="feature-card">
        <h3>Secure</h3>
        <p>Enterprise-grade security built in.</p>
      </div>
    </div>
  </div>
</div>

Add CSS to make it a grid on larger screens:

@media (min-width: 569px) {
  .features [data-swf-element="list"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

Cards Effect Slider

3D card stack effect.

<div data-swf-component class="card-slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-effect="cards"
      data-swf-loop="true"
      data-swf-grab="true"
      data-swf-centered="true"
    >
      <div data-swf-element="item" class="card">
        <img src="card1.jpg" alt="Card 1" />
        <div class="card-content">
          <h3>Card Title</h3>
          <p>Card description goes here.</p>
        </div>
      </div>

      <div data-swf-element="item" class="card">
        <img src="card2.jpg" alt="Card 2" />
        <div class="card-content">
          <h3>Card Title</h3>
          <p>Card description goes here.</p>
        </div>
      </div>

      <div data-swf-element="item" class="card">
        <img src="card3.jpg" alt="Card 3" />
        <div class="card-content">
          <h3>Card Title</h3>
          <p>Card description goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Product Gallery with Thumbnails

Main image with synced thumbnail navigation.

<!-- Main Gallery -->
<div data-swf-component="gallery-main" class="gallery-main">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-thumb-id="product-gallery"
      data-swf-loop="true"
      data-swf-effect="fade"
    >
      <div data-swf-element="item">
        <img src="product-large-1.jpg" alt="Product view 1" />
      </div>
      <div data-swf-element="item">
        <img src="product-large-2.jpg" alt="Product view 2" />
      </div>
      <div data-swf-element="item">
        <img src="product-large-3.jpg" alt="Product view 3" />
      </div>
      <div data-swf-element="item">
        <img src="product-large-4.jpg" alt="Product view 4" />
      </div>
    </div>
  </div>

  <div data-swf-element="navigation">
    <button data-swf-element="prev-arrow">←</button>
    <button data-swf-element="next-arrow">→</button>
  </div>
</div>

<!-- Thumbnails -->
<div data-swf-component="gallery-thumbs" class="gallery-thumbs">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-thumb-id="product-gallery"
      data-swf-visible="4"
      data-swf-gap="12"
    >
      <div data-swf-element="item">
        <img src="product-thumb-1.jpg" alt="Thumbnail 1" />
      </div>
      <div data-swf-element="item">
        <img src="product-thumb-2.jpg" alt="Thumbnail 2" />
      </div>
      <div data-swf-element="item">
        <img src="product-thumb-3.jpg" alt="Thumbnail 3" />
      </div>
      <div data-swf-element="item">
        <img src="product-thumb-4.jpg" alt="Thumbnail 4" />
      </div>
    </div>
  </div>
</div>

Full-width hero with autoplay.

<div data-swf-component class="hero-slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-autoplay="true"
      data-swf-autoplay-delay="6000"
      data-swf-effect="fade"
      data-swf-loop="true"
      data-swf-speed="1000"
      data-swf-swipe="false"
    >
      <div data-swf-element="item" class="hero-slide">
        <img src="hero1.jpg" alt="Hero 1" />
        <div class="hero-content">
          <h1>Welcome to Our Site</h1>
          <p>Discover amazing products</p>
          <a href="/shop" class="btn">Shop Now</a>
        </div>
      </div>

      <div data-swf-element="item" class="hero-slide">
        <img src="hero2.jpg" alt="Hero 2" />
        <div class="hero-content">
          <h1>New Collection</h1>
          <p>Spring 2024 arrivals</p>
          <a href="/new" class="btn">Explore</a>
        </div>
      </div>

      <div data-swf-element="item" class="hero-slide">
        <img src="hero3.jpg" alt="Hero 3" />
        <div class="hero-content">
          <h1>Special Offer</h1>
          <p>Up to 50% off selected items</p>
          <a href="/sale" class="btn">View Sale</a>
        </div>
      </div>
    </div>
  </div>

  <div data-swf-element="pagination" class="hero-pagination">
    <button data-swf-element="pagination-dot" class="hero-dot"></button>
  </div>
</div>

Vertical Slider

Slides that move vertically.

<div data-swf-component class="vertical-slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-direction="vertical"
      data-swf-loop="true"
      data-swf-speed="400"
    >
      <div data-swf-element="item">Slide 1</div>
      <div data-swf-element="item">Slide 2</div>
      <div data-swf-element="item">Slide 3</div>
    </div>
  </div>
</div>

Remember to set a fixed height on the container for vertical sliders.

.vertical-slider [data-swf-element="wrapper"] {
  height: 400px;
}