Depth of Field (DoF) is a photography term where the subject is sharp and the background/foreground is blurred. In a web slider, this translates to the “Active” slide being sharp and fully opaque, while the “Previous” and “Next” slides are blurred and slightly transparent.

To solve this, use Div Render Container Slider for Elementor combined with some simple CSS targeting.

Step 1: Setting Up the Slider

Create your container slider with your products.

  • Effect: Use Slide or Coverflow.
  • Centered Slides: Set to Yes. This is essential so there is always one focused item.
  • Slides Per View: Set to 3 or Auto so side items are visible.

Step 2: Adding the Blur (The Secret Sauce)

While some “Creative” effects allow opacity control, they often don’t include a CSS Blur filter. You can add this easily via the Custom CSS tab of the Parent Container:


selector .swiper-slide:not(.swiper-slide-active) {
filter: blur(2px);
opacity: 0.6;
transition: all 0.4s ease;
}

This code targets all slides except the active one, blurring them and reducing their opacity.

Pro Tips for Product Focus

  • Scale Active: Combined with the blur, you might want to scale up the active slide. If using the “Creative” effect, you can set the Next/Prev slides to `Scale: 0.8`.
  • Click to Focus: Ensure Slide Clickable (or similar setting) is enabled so users can click a blurred side product to bring it into focus.