Product Slider BlockFree downloadMenu
Pro

Lightning transition for WooCommerce product sliders

Black over-ear wireless headphones on a white background
Coral red wireless headphones lying on a polished red wooden surface
White wired headphones with brushed metal ear cups on a yellow background
White on-ear wireless headphones on a white background
Black open-back headphones on a dark textured surface, in black and white

Soft-shell headphones

€219

Drag the picture sideways and hold: you can stop in the middle of the move.

Lightning strikes from the top. The next picture opens behind a front of bolts that run out ahead of it, lit blue where they have just been, with a flash now and then.

It is the only transition here that seems to come from outside the picture. Use it as the one thing a page is remembered for.

Pro

Comes with Pro. Pro starts at $19 a year.

Put it on

Guitars and amplifiers
Rock has been using this picture for some time now.
E-bikes, power tools, chargers
Electricity is what the product runs on.
Black backgrounds
Blue fire on black has real force. On white it barely registers.

Keep it off

Calm, soft categories
A spa with lightning is a rather different spa.
Autoplay, in general
It flashes. Put it on a click, and leave the visitors who dislike flashing alone.

Settings

In the block the time of a move is a setting on every transition. Everything else on this list comes from gpu slider, which draws it.

Black over-ear wireless headphones on a white background
Coral red wireless headphones lying on a polished red wooden surface
White wired headphones with brushed metal ear cups on a yellow background
White on-ear wireless headphones on a white background

Soft-shell headphones €219

1100A strike should be quick, but the front has to reach the bottom of the frame.
3About how many bolts run across the width.
0.6How blue the fresh trail is lit.

In the block, in three steps

  1. Add the Product Slider block to your page, and under Products choose one category.
  2. Set Layout to One at a time, then pick Lightning under Transition. It comes with Pro.
  3. Reduce the blue setting if it looks like a game trailer. A little goes a long way on a shop.

Close relatives

Blocks that can use it

Where it goes in a shop: on a hover image swap, in a related products row or in a slider on autoplay. Questions about browsers and motion are in the FAQ.

Lightning is part of Pro, and the free plugin has fade, distance, ripple, zoom, stretch and parallax to start with. Pro starts at $19 a year.

Get the free plugin