---
title: EB Slider
description: "This is a step-by-step guideline where you can easily add an EB slider block on your WordPress site without any coding."
url: "https://essential-blocks.com/docs/slider/"
updated: "2026-03-02"
category: Content Blocks
tags:
  - block
  - block library
  - blocks
  - Building Block
  - EB Slider
  - gutenberg
  - gutenberg block
  - Gutenberg editor
  - Page Building Blocks
  - WordPress
---

# EB Slider

 A well-placed **[EB Slider](https://essential-blocks.com/demo/slider/)**block can enhance the overall visual aesthetics of your homepage in a beautiful way. This responsive Gutenberg block can fine-tune your marketing message with immersive images. 

Follow this step-by-step guide to design website content using the **EB Slider block in Gutenberg**.

## **How To Activate EB Slider Block?  **

First, [**install and activate the Essential Blocks**](https://essential-blocks.com/docs/how-to-install-essential-blocks/) for Gutenberg plugin into your WordPress dashboard. Essential blocks come with modular control which gives you the freedom to enable only using blocks. 

To activate EB Slider Block, navigate to **Essential Blocks → Blocks**. Then, toggle to enable this **‘Slider’** block. After that, click on the **‘Save’** button. 

![Enable EB Slider](https://essential-blocks.com/wp-content/uploads/2020/07/1.-Enable-EB-Slider.gif)

## **How To Configure Slider Block In Gutenberg?**

Now open a new page in Gutenberg or an existing page from the WordPress dashboard. Press the **‘+’**icon, type **‘Slider’**on the search box, and just click on the block. It will successfully appear on your main editing page.

![EB Slider](https://essential-blocks.com/wp-content/uploads/2022/04/image-33.gif)

### **General**

Now the block is on your main page, you can style the block in many ways. Navigate to the **Block→ General** tab. In this tab, you can either keep the default slider or you can add the **‘Marquee’** effect to the slider. In the **‘Marquee’**type, you can choose a slider image with or without content. There is also an option to enable or disable the ‘Reverse’ to control the showcasing of the slide. Here, you can also adjust the **‘Image Width’**, **‘Image Height’** and **‘Animation Speed’** for the effect.

![EB Slider Marquee effect](https://essential-blocks.com/wp-content/uploads/2020/07/2.-Marquee-Effect.gif)

From the default options you you can customize your **Slider Height**,**Slides To Show** & **Animation speed** as per your preference. You can control your image’s**Adaptive Height, Autoplay Dots, Fade,** etc features.

![EB Slider default effect](https://essential-blocks.com/wp-content/uploads/2020/07/3.-Default-settings.gif)

### **Style**

From the ‘Style’ tab,  customize the outlook of your block by navigating to **Block**→**Style. Under** this tab, you can customize your **Slides Gap** between images.

Under the **Arrow** tab, you can change your Arrow effect between**Normal** or **Hover,** as well as change the **color**of your slider arrow, **Arrow Size** & **Arrow Position**. Under the **Dot,**tab, you can customize the **Color**, **Active** **Color**, **Size**, **Gap** & **Position** of your slider’s Dot. 

![EB Slider style](https://essential-blocks.com/wp-content/uploads/2020/07/4.-Style-Tab.gif)

### Advanced

From the **‘Advanced’** tab, navigate to **Blocks→Advanced.**Under the **Advanced tab**, you can change the **Margin** & **Padding** of your slider block. Under the **Background** tab, you can upload any images as well as choose between the **Normal** or **Hover** effect on the image. 

![EB Slider Advanced](https://essential-blocks.com/wp-content/uploads/2020/07/5.-Advanced-Tab.gif)

Besides, you can configure your**Background image’s** **position**, **attachment**, **repeat sequence**, and **size**. Under the **Border & Shadow**tab, you can easily customize **Border Style**, **Border Color, Border Width & Radius,**and **Box Shadow.**

## **Final Outcome**

By following these simple steps you can easily style and customize your **Slider** block. 

![EB Slider Final Outcome](https://essential-blocks.com/wp-content/uploads/2020/07/6.-Final-Outcome-1-scaled.gif)

This is how to design and configure an **EB Slider** block in Gutenberg easily. 

Getting Stuck? Feel free to [**contact our support team**](https://wordpress.org/support/plugin/essential-blocks/) for further assistance.