Tango Slider is a carousel-type slider that makes product or content showcasing purpose better than ever. With the feature of focusing on one content at a time, it will help to objectify one image at a time.

Let’s explore the customizations.

Enable The Tango Slider Widget

To use the Tango Slider widget from Prime Slider, first, you have to enable the widget.

1. Go to WordPress dashboard > Prime Slider Plugin dashboard.
2. Then, Click the Core Widgets Tab.
3. Search for the Tango Slider Widget Name.
4. Enable the Tango Slider Widget.
5. Hit the Save Settings Button.

Inserting the Tango Slider widget

1. Go to the Elementor Editor Page and hit the “+” icon Button.

2. Search the Tango Slider widget.

3. Drag the widget and drop it on the editor page.

Work With Content Tab of the Tango Slider

Layout Section Customizations

Go to Content > Sliders

1. Add Item: You can add a new item by clicking the “+”Add Item button.

2. Copy Item: This option lets you copy the same item.

3. Remove Item:  You can delete the Slider item by clicking the Close icon button.

1. Label: This option lets you change the Label text.

2. Title: This option lets you change the Title text.

3. Title Link: You can set a link under the Title.

4. Image: You can set an image for the selected item.

Slider Settings Section

Go to Content > Slider Settings

1. Layout: You can select the slider layout type – Carousel and Coverflow. Here We first select the layout type – carousel.

When you sleect the layout – Coverflow

If you like the layout type- Coverflow then you also can set the layout.

In this section, you will be able to see a bunch of Switchers like Item Match Height, Auto Play, Auto Play speed, Pause on Hover, Slides to Scroll, Grab Cursor, Loop, Animation Speed, and Observer.

What they do-

3. Item Match Height: If you enable the item match height switcher button, then all slide items will appear in the same height.

4. Autoplay switcher: If you Enable the Autoplay switcher button, your slider will slide into Autoplay mode, and you can set the Autoplay Speed as your wish.

5. Pause on Hover: If you activate the pause on Hover button, when visitors Hover the mouse cursor on the slider, then your slider will Hold, otherwise your slider slide on Autoplay.

6. Slides to scroll: It represents how many slides will slide at once.

7. Grab The Cursor: Your mouse pointer icon will be changed into a grab cursor. Visitors can slide your slider manually with your mouse cursor.

8. Loop: When you activate the Loop switcher button, your slider will loop at a certain time interval. You also set up the loop animation speed here.

9. Observer: If you enable the option then you are able to use the slider/carousel in any hidden places (such as in tabs, Accordion, etc).

Work With The Style Tab

Content Section Customizations

Go to Style > Content

Content Padding: You can set the content padding from here.

Image Section Customizations

Go to Style > Image

1. Overlay Color Type: Here you will get overlay color type- Classic and Gradient. Here we choose the overlay type- classic.

2. Overlay Color: This option lets you set the overlay color.

3. Border Radius: This option lets you set the image border radius.

Title Section Customization

Go to Style > Title

1. Color: This option lets you set the Title Color.

2. Hover Color: This option lets you set the Title hover Color.

3. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.

4. Text Shadow: The Text Shadow property is used to create the shadow around the text. It takes three values: horizontal offset, vertical offset, and blur radius. Here you also can change the Text Shadow Color.

Label Section

Go to Style > Label

1. Color: This option lets you set the Label color.

2. Box Shadow: The Box Shadow property is used to create the shadow around the Category Button. It takes Four values: Horizontal offset, Vertical offset, blur, and Spread to customize the Box shadow.

Position: you can set the Box Shadow position Outline and Inset. Here we set the Box Shadow position Outline.

Box Shadow Color: This lets you change the Box Shadow color.

3. Spacing: You can adjust the sub title spacing from here.

4. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.

Navigation Section

Go to Style > Navigation

Come to the Navigation section, you will get two subsections; Arrows and Pagination.

In the Arrow subsection, you will get two tabs section; Normal and Hover. In the Normal mode, you will get the below customization options-

1. Color: This option lets you change the navigation arrows normal color.

2. Background Type: You can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

3. Background Color: This lets you change the Background color. If you want, you also can change an image to the Background.

4. Border Type: you can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove. We choose here the Border Type Solid.

5. Border Width: The border width property allows you to control how thick or thin the border is.

6. Border Color: This lets you change the Border color.

7. Border Radius: Customizes the border corners for roundness.

8. Padding: Add spaces around an object to increase the inner area. Padding allows you to control the internal space within an element.

9. Box Shadow: You can add the box shadow for the navigation arrows.

10. Size: You can set the navigation arrows size.

11. Spacing: You can adjust the Space Between arrows.

12. Color: This option lets you change the navigation arrows hover color.

13. Background Type: You can change the color of any object background to classic or gradient. Here we choose the Background type Classic.

14. Background Color: This lets you change the background hover color. If you want, you also can change an image to the Background.

15. Border Color: This lets you change the navigation hover Border color.

Come to the Pagination sub section, you will get the below options-

15. Color: This option lets you set the pagination color.

16. Activate Color: This option lets you set the pagination active color.

17. Size: You can set the pagination size from here.

All done! You have successfully customized the Tango Slider widget on your website.

Video Assist

You can visit the demo page to learn more about the Tango Slider widget.

Thanks for staying with us.