Effects

Add visual transition effects to your slider.

Available Effects

Value	Description
`"fade"`	Crossfade transition between slides
`"cards"`	3D card stack effect with rotation
`"card"`	Alias for `cards`
`"creative"`	Custom transform with vertical offset
`"creative-flat"`	Custom transform without vertical offset

Basic Usage

<div data-swf-element="list" data-swf-effect="fade">

Attribute	Swiper Property	Type	Default
`data-swf-effect`	`effect`	string	(none)

Fade Effect

Smooth crossfade between slides. Best for single-slide views.

<div
  data-swf-element="list"
  data-swf-effect="fade"
  data-swf-speed="800"
>

The fade effect automatically enables crossFade: true for smooth overlapping transitions.

Best Practices for Fade

Works best with data-swf-visible="1" (single slide view)
Combine with data-swf-loop="true" for continuous cycling
Great for image galleries and hero banners

Example: Fade Gallery

<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-effect="fade"
      data-swf-loop="true"
      data-swf-speed="600"
      data-swf-autoplay="true"
      data-swf-autoplay-delay="4000"
    >
      <div data-swf-element="item">
        <img src="image-1.jpg" alt="Image 1" />
      </div>
      <div data-swf-element="item">
        <img src="image-2.jpg" alt="Image 2" />
      </div>
      <div data-swf-element="item">
        <img src="image-3.jpg" alt="Image 3" />
      </div>
    </div>
  </div>
</div>

Cards Effect

3D stacked card effect with rotation and shadows.

<div
  data-swf-element="list"
  data-swf-effect="cards"
>

The cards effect creates a deck-of-cards appearance where slides stack with:

64px offset per slide
-2° rotation
Slide shadows

Best Practices for Cards

Works best with single slide view
Ensure slides have consistent dimensions
Great for product showcases and testimonials

Example: Cards Slider

<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-effect="cards"
      data-swf-loop="true"
      data-swf-grab="true"
    >
      <div data-swf-element="item" class="card">
        <h3>Card 1</h3>
        <p>Card content here</p>
      </div>
      <div data-swf-element="item" class="card">
        <h3>Card 2</h3>
        <p>Card content here</p>
      </div>
      <div data-swf-element="item" class="card">
        <h3>Card 3</h3>
        <p>Card content here</p>
      </div>
    </div>
  </div>
</div>

Creative Effect

Custom transform effect with vertical offset for a dynamic stacked appearance.

<div
  data-swf-element="list"
  data-swf-effect="creative"
>

The creative effect applies these transforms:

Next slide: Translate 90% right, -2rem up, scale 0.9
Previous slide: Translate 90% left, -2rem up, scale 0.9

Example: Creative Slider

<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-effect="creative"
      data-swf-centered="true"
      data-swf-loop="true"
    >
      <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>

Creative Flat Effect

Similar to creative but without vertical offset — slides stay on the same plane.

<div
  data-swf-element="list"
  data-swf-effect="creative-flat"
>

The creative-flat effect applies:

Next slide: Translate 90% right
Previous slide: Translate 90% left

On viewports narrower than 480px, the creative-flat effect is automatically disabled for better mobile experience.

Example: Creative Flat

<div data-swf-component="slider">
  <div data-swf-element="wrapper">
    <div
      data-swf-element="list"
      data-swf-effect="creative-flat"
      data-swf-centered="true"
    >
      <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>

Combining Effects with Other Options

Effects work well with other attributes:

<div
  data-swf-element="list"
  data-swf-effect="fade"
  data-swf-loop="true"
  data-swf-autoplay="true"
  data-swf-autoplay-delay="5000"
  data-swf-speed="800"
>

Tips

Fade is best for full-width hero sections and image galleries
Cards creates an engaging, interactive feel — great for testimonials
Creative effects add depth and visual interest to portfolios
Always test effects on mobile devices to ensure they perform well
Combine effects with data-swf-speed to control transition timing

Effects

On this page