---
title: "How to Add a Swipe or Slide Effect on Elementor Tabs?"
url: https://theplusaddons.com/docs/swipe-or-slide-effect-on-elementor-tabs/
date: 2023-02-13
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "With many tabs, the titles no longer fit in one row and wrap onto several lines. The Swiper Effect of the Tabs/Tours widget from The Plus Addons for Elementor keeps..."
image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-add-swiper-effect-on-Elementor-Tabs_-1024x536.jpg
word_count: 373
---

# How to Add a Swipe or Slide Effect on Elementor Tabs?

## 

- The Plus Addons for Elementor Tabs/Tours widget includes a Swiper Effect option that makes Elementor tab titles swipeable or scrollable when a long list of tab items threatens the layout.
- Swipe mode makes tab titles move horizontally by dragging across the tab bar, while Slide mode shows arrows for click-based navigation through the titles.
- Loop keeps tab title navigation cycling continuously, and Center Mode appears with Slide to place the active tab title at the center of the tab bar.

With many tabs, the titles no longer fit in one row and wrap onto several lines.

The **Swiper Effect** of the **Tabs/Tours** widget from The Plus Addons for Elementor keeps all titles in a single row. Visitors drag the row, or use arrow buttons, to reach the rest.

*To check the complete feature overview documentation of The Plus Addons for Elementor Tabs/Tours widget, [click here](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/tabs/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Swiper Effect needs The Plus Addons for Elementor Pro. The Tabs/Tours widget itself is free.- **Widget to enable:** Tabs/Tours, switched on under **The Plus Addons > Widgets**.- **Layout** set to **Horizontal**. The option is hidden for vertical tabs.

## How to Add the Swipe or Slide Effect

- Add the **Tabs/Tours** widget and add your tabs in **Content**.- Open **Extra Option** and turn on **Swiper Effect**.- Choose a **Mode**: **Swipe** or **Slide** (see below).- Optional: turn on **Loop**, and in Slide mode **Center Mode**.

![The Swiper Effect settings in the Extra Option section of the Tabs/Tours widget with Mode set to Slide](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-swiper.webp)

## Swipe or Slide?

| Mode | What visitors see |
| ---- | ----------------- |
| Swipe (default) | One row of titles with no buttons. Visitors drag the row sideways to reach more titles. |
| Slide | One row of titles with next and previous arrow buttons. Visitors click the arrows or drag the row. |

![Tab titles moving sideways with the slide effect](https://theplusaddons.com/wp-content/uploads/2023/02/slider-tab-preview.gif)

## Loop and Center Mode

- **Loop** makes the row of titles loop. In our Slide mode test the previous button was active from the start instead of greyed out.- **Center Mode** (Slide only) starts the row with the first title in the middle. It hides the arrow buttons, so visitors drag the row.

![The Center Mode switch of the Swiper Effect settings in Slide mode](https://theplusaddons.com/wp-content/uploads/2026/09/tabs-center-mode.webp)

You can change the arrow icons, their size and the look of a disabled arrow in **Style > Swiper Slide**.

## How It Behaves

- Clicking any title in the row opens its tab, in both modes.

## Limitations

- Only for horizontal tabs.- Center Mode removes the arrow buttons.- Slide mode with Loop on breaks a [carousel connection](https://theplusaddons.com/docs/connect-a-carousel-with-tabs-in-elementor/).- The Swiper Effect is not part of the free plugin.

## Troubleshooting

### I can't find Swiper Effect

Set **Layout** to **Horizontal**. The option is hidden for vertical tabs.

### The arrow buttons are missing

Arrows only appear in **Slide** mode with **Center Mode** off.

## Related Docs

- [Tabs/Tours widget: settings overview](https://theplusaddons.com/docs/tabs-tours-elementor-widget-settings-overview/)- [Split tab titles into columns](https://theplusaddons.com/docs/divide-elementor-tabs-into-multiple-columns/)- [Connect tabs with a carousel](https://theplusaddons.com/docs/connect-a-carousel-with-tabs-in-elementor/)