bisheng/blablablocks-slider-block
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/lubusIN/blablablocks-slider-block.git synced 2025-10-03 23:13:09 +08:00
Code Issues Projects Packages Wiki Activity Actions
Page: Your First Slider
Pages
Getting Started Home Video Guides Your First Slider
2 Your First Slider
Ajit Bohra edited this page 2025-08-11 23:00:12 +05:30
Unescape Escape
Table of Contents
This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Step 1: Insert Block

https://github.com/user-attachments/assets/6424ee7f-6856-496a-95a5-6ae829715545

  1. Open the page or post in the Block Editor.
  2. Click the “+” Add Block button.
  3. Search for “Slider” and click it.

Step 2: Starting Point

  1. Use a Design Pattern:

Pre-designed sliders ready to customise.

https://github.com/user-attachments/assets/4ab079b7-fd34-49f9-b609-b124fcb4262a

  1. Use a Variation:

A blank slider with a preset structure.

https://github.com/user-attachments/assets/fe0c527e-ee22-44fe-9016-60f8775a64ac

  1. Build from Scratch:

Start empty and add blocks yourself.

https://github.com/user-attachments/assets/34553fee-1c94-4dbe-9301-8394a373e78c

Tip

For Beginners

  • Start with a pattern if you’re new; it’s faster and gives you a visual base.
  • Use the List View to manage multiple slides more easily.
  • Experiment with different core blocks inside slides for creative layouts.

Step 3: Adding Slides

https://github.com/user-attachments/assets/831c5f7a-2243-4fe1-a304-a14de0005be5

  • To add a slide: click “Add Slide” in the block toolbar or the list view.
  • Each slide can contain any block: images, headings, buttons, videos, testimonials, etc.

Step 4: Customisation

https://github.com/user-attachments/assets/dab584c6-c252-4f1f-86ce-2fe5e0a6ba36

In the Block Settings Panel (right sidebar), you can:

  • Select Slider block.
  • Explore settings in the sidebar
  • Adjust slides
  • Adjust spacing.
  • Config navigation
  • Config paginations

Custom slider as needed

Step 5: Responsive Behaviour

https://github.com/user-attachments/assets/a27d92bc-633c-4f55-90b1-d8232b926c12

Under Responsive Controls, you can:

  • Switch preview mode
  • Change how many slides appear per screen size.
  • Enable/disable autoplay.
  • Control arrow and dot navigation for mobile.

Tip

For responsive setting, you will find the device icon next to it, indicating responsive behaviour

The Blablablocks Slider Block combines flexibility and familiarity. You can build anything from a simple image carousel to a rich content slider all within the WordPress block editor.