This helps your slider look clean, balanced, and well-structured across different sections.

Step 1: Go to Slider Settings

Select the entire Sliderberg block by clicking the icon on the toolbar. Then, come to the settings tab on the right sidebar.

Step 2: Set Width for the Slider

Right under the settings tab, you will see the Width Settings option. Click the dropdown icon as marked on the image below.

A list will open up. Choose the option you want to set for the width of the slider block.

Step 3: Set Minimum Height for the Slider Block

Under layout settings, you will find the Minimum Height option. Set how much height you want to display for the block.

Conclusion

Set width and minimum height based on your content and layout needs. Avoid extreme values that break design balance. Keep enough height for clear visibility and test on all devices to ensure your slider stays clean, stable, and easy to view.

Step 1: Enable the Carousel Mode

Select the entire Sliderberg block. Then, go to the settings tab.

Scrolling down the settings tab, come to the carousel settings option. Activate the enable carouse mode by toggling it on.

Step 2: Set Breakpoints for Different Screen Sizes

Once it’s enabled, you will get the option to switch between different screen sizes – Desktop, Tablet, and Mobile. You can set specific settings separately for each screen size.

See the video clip attached below. You can switch between different screen sizes by clicking on the respective tabs and configure settings specifically for them.

Conclusion

Set your breakpoints with care to match each screen size. Avoid showing too many slides on small devices and keep spacing clean. Always test on desktop, tablet, and mobile to ensure a smooth, balanced, and easy viewing experience for all users.

Step 1: Enable the Carousel Mode

Select the entire Sliderberg block and come to the settings tab on the right sidebar.

Scrolling down the tab, come to the carousel settings and enable carousel mode by toggling it on.

Step 2: Configure Slide Spacing and Infinite Loop

Once the carousel mode is enabled, some more options will appear. There, you’ll get the Slide Spacing option. Place the value as you want.

After that, you can toggle on the Infinite Loop option.

Thus, you can adjust the sliding space and the infinite loop.

Conclusion

Use slide spacing to keep your layout clean and easy to scan. Avoid too-tight or too-wide gaps. Enable Infinite Loop only when it improves flow and does not distract users. Always test on different screens to keep the slider smooth, balanced, and user-friendly.

Let’s explore how to enable the course mode in the Sliderberg block.

Step 1: Go to the Settings Tab of the Sliderberg Block

Select the entire Sliderberg block by clicking its icon on the toolbar. Then, go to the settings tab on the right sidebar.

Step 2: Enable the Carousel Mode

By scrolling down the settings tab, come to the Carousel Settings. Toggle on to activate the ‘Enable Carousel Mode‘.

Once the carousel mode is enabled, you’ll see the block’s layout get changed.

Step 3: Configure the Settings of the Carousel Mode

From the Slides to Show option, you can set the number of slides you want to show on the layout.

Conclusion

Use Carousel Mode with care to keep your slider smooth and easy to follow. Show a clear number of slides and avoid too fast scrolling. Keep spacing clean and test on all devices. This helps you create a simple, user-friendly, and engaging slider experience.

Step 1: Go to the Settings Tab

Select the entire Sliderberg block by clicking the icon on the toolbar. Then, go to the settings tab on the right sidebar.

Step 2: Hide Navigation Arrows and Dots

By scrolling the settings tab, come to the options, hide navigation arrows, and hide dots. Just toggle on them.

Once these options are enabled, you can see that arrow and dot icons have got hidden.

Thus, you can easily do this.

Conclusion

Though you now know how to hide arrows and dots on the image slider, it’s not always a good practice to keep them hidden randomly. Only when you have a special purpose or objective can you consider doing this.

Step 1: Add the Sliderberg Block to the Editor

Click the plus (+) icon on the editor. Type Sliderberg in the search box. Once the block appears, add it to the editor.

The block will be added right away.

Step 2: Add Images to the Block

You can upload images from the local drive or just add from the media library. Choose the option you want. Let’s click the Media Library button.

You have to add images to the slider block individually. Choose the first image you want. Then, hit the Select button at the bottom-right corner.

The image will be added to the block instantly. Now, to add another image, click the plus (+) icon on the toolbar.

In this way, add as many images as you want to the slider block.

Step 3: Configure Settings of the Sliderberg Block

Select the entire block by clicking the Sliderberg icon on the toolbar. Once selected, to the settings tab on the right sidebar.

Under the tab, you’ll get these options – width preset, minimum height, transition effect, and transition duration.

By scrolling down the tab, you will get some more options. They are transition easing, autoplay settings, and navigation settings.

Step 4: Stylize the Sliderberg Block

To stylize the block, come to the styles tab on the right sidebar.

From this tab, you can stylize the color, padding, and margin for the block.

Conclusion

Thus, you can create your slider with the sliderberg block. You can even add a caption, heading, and description to each image separately. The texts can also be customized by adjusting their color, padding, and margin.

Hope you can do these alone as this process is similar like any other Gutenberg block.

Step 1: Open the Block Inserter Popup

Click the plus (+) icon on the editor. Once the block inserter popup opens up, type Sliderberg in the search box.

The block will appear immediately. Click on it. This will be added to the editor right away.

Once the block is added, you can add or upload images to prepare your slider.

Conclusion

Using the Sliderberg block isn’t different than using any other block, like the image block. The only thing you must care about most is typing the block’s name accurately. Then, hopefully, you can do the rest yourself.

Step 1: Select the Parent Slider Block

Click on the outer area of the slider to open its settings, or click inside a slide and then use the block toolbar to select the parent Slider block. This will activate the block settings panel on the right.

Step 2: Find Navigation Settings

Scroll down the block settings until you find the Navigation Settings section. This is where all controls related to arrows are grouped.

Step 3: Change Arrow Shape and Size

Find the Shape dropdown and choose your preferred arrow shape. You have two options: Circle and Square. You can also choose from available size presets like small, medium, or large.

Step 4: Set Arrow Colors

You’ll see color pickers for both the arrow color and background color. You can enter hex codes manually or use the visual picker. You can adjust the opacity slider if needed.

Step 5: Adjust Placement

Choose from the Navigation Type options: Bottom Arrows, Top Arrows, or Split Arrows. If you select Split Arrows, the Placement option will become active. You can then choose to overlay your arrows inside the content or place them outside. After that, adjust the Vertical Position and Horizontal Position sliders to set the exact placement of the arrows.

Conclusion

Navigation arrows might seem like a small detail, but they play a big role in how users move through your slider. With Sliderberg, you have full control over how these arrows look and where they appear. Taking a moment to adjust their shape, color, and position helps you create a smoother browsing experience that fits naturally into your site’s design.

Step 1: Select the Slider Block

First, select the Sliderberg block in your editor by clicking on the outer edge of the slider. This opens the block settings panel on the right side.

Step 2: Open Animation Settings

From the Settings panel, scroll down to the section labeled Animation Settings. Here you’ll find the options for transition effect, duration, and easing.

Step 3: Adjust the Slide Duration

Use the Transition Duration slider or type in a number to set how long the slide animation should take. The value is in milliseconds.

Step 4: Choose a Transition Easing Option

Open the Transition Easing dropdown and select your preferred option. The available easing styles include:

• Ease
• Ease In
• Ease Out
• Ease In Out
• Linear
  

Slide Duration and Easing in Action

Demo 1: Fast Transition (300ms, Ease, Autoplay On)

Demo 2: Balanced Timing (600ms, Ease In Out, Autoplay On)

Demo 3: Slow Reveal (1000ms, Linear, Autoplay On)

Conclusion

Small adjustments to duration and easing can change how your slider feels without changing its content. A steady pace with the right animation behavior helps your slides flow better and keeps the experience smooth for visitors. These controls offer just enough flexibility to match your slider’s motion to the tone of your site.

This guide shows you how to change background images using the Cover block inside your slide.

Step 1: Open the Slide You Want to Edit

Click inside the Sliderberg block until you’re inside a specific slide.

Step 2: Change the Slide Image

Click Background Settings (1) and then Replace Image (2).

You can either upload an Image using the Upload Files option or select one from the media library.

After selecting the image, click the Select Button, and it will be in the slider.

After all the customization, you must save or publish your post or page.

Here is the demo of the slider below.

Conclusion

Sliderberg makes it easy to add or change background images. With just a few clicks, you can turn a plain slide into a visual highlight—directly within the WordPress editor.