Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Classic Elementor widget · Free

Filterable Slider for Elementor: A slider with category filter buttons

Build an Elementor slider with category filter buttons above or beside it. Visitors pick a category and the Elementor filterable carousel shows only those slides, while it keeps looping on its own. Each button can show how many items it holds, which suits a portfolio slider with filter or a product showcase.

  • Free widget
  • Category filter with counts
  • Autoplay and loop
  • Filter above or beside

Classic widget · Elementor 3 and 4Updated

Live demos

Two filterable sliders, live

Two project sliders on small studio sites, one with the filter above and one with the filter beside it. Both loop on their own. Pick a category to see only those projects.

Interior studio portfolio

A portfolio slider with filter above

The projects page of an interior studio. Four category buttons sit above three tall photos, each with a number beside it. The photos slide on their own every three seconds, and round arrows let you go faster.

Click Interior Design, then use the arrows

In the panel, set Direction to Above, Slides to Show to 3, Animation Speed to 1200 and Autoplay delay to 3000.

Architecture practice

An Elementor filter slider with the list beside it

The work page of an architecture practice. The category list runs down the left and the slider fills the rest of the width. There are no arrows. The slider keeps moving on its own.

Click Renovation

In the panel, set Direction to Before, Slider Width to 80 %, Navigation to Hide and Loop to Yes.

Features

Key features of Filterable Slider

What the widget does, with the panel setting behind each feature.

Category filter with counts

Turn on Enable Filter, add Filter Items with a Title and an optional Count, and rename the all button with Filter All Labels. That gives you an Elementor slider with category filter buttons.

Filter above or beside

Place the filter Above, Below, Before or After the slider with Direction, and set the Slider Width when it sits beside it.

Autoplay, loop and arrows

Autoplay, loop and arrows keep the Elementor filterable carousel moving, and the filter lets visitors jump to the work they care about.

Slides with captions and links

Use it as an Elementor category slider: each slide has Choose Image, Title, Sub Title, Description and Link, plus a Filter name that can list several filters.

Full slider control

Set Slides to Show, Autoplay delay, Animation Speed, Space Between, Loop and Mousewheel per screen size.

Arrows and pagination

Show Navigation arrows and pick a Pagination Type: bullets, fraction, progress bar or fraction progress.

Grid slides

Turn on Enable Grid and set Grid Rows to show two or more rows in each step.

Styled to match

Style the filter text, active color and count, the caption box, the image Height and Object Fit, the arrows and the pagination, on every screen size.

Step by step

How to add a filterable slider in Elementor

Five steps. The bold names are the labels in the Elementor panel. This is how to filter a slider in Elementor with the free widget.

  1. Install the free Animation Addons plugin, then turn on Filterable Slider in Animation Addons → Elements.

  2. In Elementor, search the panel for Filterable Slider and drag it onto the page.

  3. In Filter, keep Enable Filter on and add your Filter Items.

  4. In Slides, add each slide and type its Filter name exactly as the filter title.

  5. Set Slides to Show, Autoplay and Direction, style it, check mobile and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Filterable Slider

How do I add an Elementor slider with category filter?

Add the free Filterable Slider widget from Animation Addons, list your categories in Filter Items, and give each slide a Filter name that matches one of them.

Is there a free Elementor filterable slider?

Yes. Filterable Slider ships in the free Animation Addons plugin on WordPress.org and works with Elementor Free.

Can one slide belong to several categories?

Yes. Type several names in the slide’s Filter name, separated by commas, and the slide shows under each of those filters.

How do I filter a slider in Elementor?

Type the category names in Filter Items. Then give each slide a Filter name that matches. Visitors click a button and the slider shows only those slides.

Can the filter sit beside the slider?

Yes. Set Direction to Before or After to place the filter on the left or right, and use Slider Width to share the space.

Can I show how many items each filter has?

Yes. Each filter item has a Count field, and the All button has its own All Count. The number is typed in, not counted for you.

Can I use it as an Elementor portfolio slider with filter?

Yes. Give each slide an image, a title and a sub title with the project type, and add a Link to the project page. The filter buttons then work as portfolio categories.

Does it autoplay and loop?

Yes. Autoplay, Autoplay delay, Loop and Animation Speed are in Slider Options. With Autoplay Interaction on, a click on an arrow stops the autoplay.

Which pagination styles are there?

Bullets, fraction, progress bar and fraction progress, which shows the current and total numbers with a filling line between them. Use them on an Elementor carousel with category filter.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.

Animation Addons Pro · Elementor 4

Your work, one category at a time

A free Elementor slider with category filters, counts and autoplay.

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license