Slider with Arrows and Tabs

Here's an example implementation using **Swiper.js**:

### 1. Include Swiper.js in Your Project
Add the Sw

—

### **Option 1: Use WPBakery's Built-In Elements**
1. **Add a Row**:
Go to WPBakery Page Builder and add a new row.

2. **Insert Image Carousel or Post Grid**:
– Click on **"+ Add Element"** and choose the **Image Carousel** or **Post Grid** element, depending on whether you want to display images or posts.
– Configure the images or posts to display in the slider.

3. **Enable Navigation Arrows**:
– In the element's settings, look for options like "Enable Navigation Arrows" or "Enable Pagination".
– Turn on both **Arrows** (left and right navigation) and **Pagination** (dots or tabs below the slider).

4. **Style Tabs Below the Slider**:
– For tabs or dots below, ensure the **Pagination** option is set to "Bullets".
– Use the "Design Options" in WPBakery to adjust margins, paddings, and colors for better alignment.

5. **Save and Preview**:
Save the changes and preview your slider.

—

### **Option 2: Use a Slider Plugin (Recommended for Advanced Features)**
If WPBakery’s default elements don’t meet your requirements, use a slider plugin like **Slider Revolution**, **Smart Slider 3**, or **MetaSlider**. These plugins integrate well with WPBakery and allow you to create more customized sliders.

#### Steps to Use a Slider Plugin:
1. **Install and Activate the Plugin**:
– Go to your WordPress Dashboard → Plugins → Add New.
– Search for a plugin like **Slider Revolution** or **Smart Slider 3**.
– Install and activate it.

2. **Create the Slider**:
– Go to the slider plugin’s settings page and create a new slider.
– Add images, configure arrows, and enable tabs or bullets for navigation.

3. **Insert Slider in WPBakery**:
– In WPBakery, add a new **"Slider Revolution"** or **"Smart Slider 3"** element.
– Select the slider you created and save.

4. **Customize with CSS (Optional)**:
– If needed, add custom CSS to style the arrows, tabs, or alignment.

—

### **Option 3: Custom HTML in WPBakery**
If you want full control, you can use the **"Raw HTML"** element to add custom HTML, CSS, and JavaScript for a slider (e.g., Swiper.js or Slick Slider).

#### Example for Swiper.js:
1. Add a **"Raw HTML"** element in WPBakery.
2. Insert the following code:

<!-- Slider -->
   <div class="swiper mySlider">
       <div class="swiper-wrapper">
           <div class="swiper-slide">Slide 1</div>
           <div class="swiper-slide">Slide 2</div>
           <div class="swiper-slide">Slide 3</div>
       </div>
       <!-- Arrows -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
       <!-- Tabs -->
       <div class="swiper-pagination"></div>
   </div>

3. Add Swiper.js via your theme or a custom plugin and initialize it:

const swiper = new Swiper('.mySlider', {
       navigation: {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },
       pagination: {
           el: '.swiper-pagination',
           clickable: true,
       },
   });

This method gives you the most flexibility but requires some coding skills.

—

### Conclusion
– For quick implementation, use **Image Carousel** in WPBakery.
– For advanced features, integrate a slider plugin like **Slider Revolution**.
– For full control, use custom HTML/JS sliders like **Swiper.js** or **Slick Slider** with the "Raw HTML" element in WPBakery.