Qthemy Slider Builder – Hero Slider & Carousel

Qthemy Slider Builder is a WordPress slider plugin with a visual, layer-based editor. Build hero sliders, image and video carousels, and full-width banners right from your dashboard, with a separate layout for desktop, laptop, tablet, and mobile. Add a slider with the block, the Elementor widget, or a shortcode. Right-to-left (RTL) sites and Arabic are supported from the start, and the editor itself works in Arabic and English.

Every feature in this plugin is free and works without a license key or an account. It connects to qthemy.com only for the template library, when you open the Templates page or the Sliders page (see External Services).

No page-builder plugin is required. Create as many sliders, slides, and layers as you need.

Features

Visual slider editor
Add, arrange, and resize elements directly on a live preview of each slide, with rulers and draggable alignment guides. Switch devices right above the slide, and press Play to see the slide you are editing move in place, exactly as the site shows it. Keyboard shortcuts: Q opens the preview, the arrow keys move the selected element (Shift for 10px steps), Delete removes it, Ctrl+D duplicates it, Ctrl+S saves, and Ctrl+Z undoes, also with an Arabic keyboard.

Sliders page
Your sliders as cards with a live preview of their first slide, their status, and a shortcode you copy with one click. Search and filter them, start a new one from a blank slider, a template, or a file, and duplicate, export, or move a slider to the Trash from its card.

Template library
Ready-made sliders for every screen size, with a live preview on desktop, tablet, and mobile. Filter them by language (templates designed in Arabic or in English), category, and Free or Pro. Import a free template with one click: it is added as a draft slider and its images are added to your Media Library. Pro templates are marked as such and need the Pro add-on with an active license.

Content protection
Turn on “Protect content” for a slider, and visitors cannot right-click it, select and copy its text, or drag and save its pictures (it is on for new sliders). Pictures are never picked up by a mouse swipe.

Heading, text editor, image, button, shape, and rating elements
Headings fit their text (press Enter for a new line) and take an HTML tag (H1-H6 or paragraph) for SEO. The text editor element writes paragraphs with a toolbar like the WordPress editor: bold, italic, underline, strikethrough, bulleted and numbered lists, links, text color, and highlight; pasted text keeps only that simple formatting. Add images with alt text and opacity, buttons sized by their inner spacing with an optional icon, shapes (rectangle, circle, triangle, diamond, pentagon, hexagon, octagon, star, parallelogram) with a border that keep their proportions on every device, and star ratings with half stars that fill from the right on right-to-left sites, with an optional shine, pulse, or twinkle motion. Any element can be duplicated from the layers list.

Carousel element
Put a carousel of images and videos inside a slide, next to your heading and buttons. Choose the cards from the Media Library, give each one an optional caption and link, and pick a look: a moving row (one card at a time, with optional arrows and dots) or a continuous strip (with a gap of 0 it becomes a filmstrip). Set how many cards show on each device, the gap, the card ratio (1:1, 4:5, 3:4, or 16:9), and the corners. It plays on its own and follows a mouse or finger drag; it waits while it is out of view, when the visitor’s device asks for less motion, or while someone moves through it with the keyboard. A video plays only while its card shows, and on right-to-left sites the cards move from the right. The Pro add-on adds four more looks.

Container (Flex and Grid)
Group elements in a container and they arrange themselves: in a row or a column (with wrapping, distribution, and alignment) or in a grid with a set number of columns. Every layout setting, the gap, and the inner spacing can differ per device, for example three columns on desktop and one on mobile. Drag elements into a container, reorder them inside it, or drag them out. Let the container set the width of its elements (equal shares of a row, the full width of a column or cell), and give it a background image, a shadow, and a blur behind it.

Typography
Every element with text gets the same settings: size, weight, line height, and letter spacing. Text uses your theme’s font, so sliders match the rest of your site.

Sizes that fit smaller screens
Font sizes and button spacing shrink on their own on laptop, tablet, and mobile (80%, 67%, and 53% of desktop) until you set a size for that device.

Content, Style, and Advanced tabs
Element settings are grouped into three tabs, so the setting you need is always easy to find.

Device visibility
Hide any element on desktop, laptop, tablet, or mobile.

Per-device layouts
Set the position, size, font size, and text alignment of every element separately for Desktop, Laptop, Tablet, and Mobile, and choose a slider width and height for each device.

Slide backgrounds
Use a solid color, a gradient, or an image from the Media Library, with an optional color or gradient overlay. Give the slider rounded corners, set for each corner, and a shape on its top or bottom edge (wave, waves, curve, tilt, triangle, mountains, zigzag, arrow, or bumps) in the color of the page around it.

Color picker with gradients
Every color opens one picker with HEX, an opacity bar, ready-made colors, and an eyedropper. Slide backgrounds, text, button backgrounds, and shapes also get a Gradient tab (linear or radial, two colors, angle).

Autoplay and navigation
Slides can play automatically with your own slide time. Visitors can also move between slides with arrows, dots, or by swiping, with a smooth fade transition. Place the arrows in the bottom bar or on the sides, choose line or round dots, and pick their color.

Slider width
Keep the slider at the size you set, stretch it to the width of its container, or stretch it to the full width of the screen. In the wide modes the background fills the width while the elements stay centered, also when a page builder container changes the slider’s width. Inside Elementor containers the slider takes the container’s width automatically.

Fast loading
Images of the other slides load only when they are about to be shown.

Duplicate, export, and import
Duplicate a slider, export it as a ZIP file with its images, and import it on another site, where the images are added to the Media Library. Files exported as .json by earlier versions can still be imported.

Block, Elementor widget, and shortcode
Add a slider with the “Qthemy Slider” block in the block editor or the “Qthemy Slider” widget in Elementor (in the “Qthemy” tab of its panel), or use the [qthemy_slider id="123"] shortcode anywhere else.

Arabic and English editor
Switch the editor interface between Arabic (right-to-left) and English.

Optional add-on

A separate, paid add-on, Qthemy Slider Builder Pro, is available from qthemy.com/slider-builder. It is not required, and it is not included in this plugin. It adds over 100 Google Fonts (more than 30 Arabic) stored on your own site, text effects (italic, letter case, underline, shadow, outlined text, balanced lines), icon, social-media, countdown, animated text, number counter, before/after, video (Media Library, YouTube, or Vimeo), bullet list, and badge elements, element animations with a timeline, additional slide transitions, autoplay extras (play/pause button, progress bar, per-slide timing), video backgrounds, and Ken Burns motion for image backgrounds.

While the add-on is not installed, the editor’s Elements tab lists the names of its elements in a separate section with a “Learn more” link. You can hide that section with one click.

Source Code

All JavaScript and CSS files in this plugin are the original, human-readable source code. They are not compiled, bundled, or minified, and no build tools or build step are used:

• assets/admin/js/admin-builder.js – the visual slider editor
• assets/admin/js/dashboard.js – the Sliders page and the Templates page
• assets/admin/js/admin-notice.js – remembers when the add-on notice is dismissed
• assets/admin/js/block.js – the “Qthemy Slider” block for the block editor
• assets/admin/js/elementor-editor.js – the “More Qthemy plugins” link in the Elementor panel
• assets/admin/js/list-actions.js – the “Import” button on the sliders list
• assets/frontend/js/frontend.js – the front-end slider
• assets/admin/css/admin-builder.css, assets/admin/css/dashboard.css, and assets/frontend/css/frontend.css – styles

You can read and modify these files directly.

Developer Notes

Add-ons can extend the plugin without modifying it:

• Front end: window.QthemySB.registerLayerType(), registerBackgroundType(), and addLayerDecorator(), plus the qthemy-sb:beforeinit (bubbles to the document), qthemy-sb:ready, qthemy-sb:beforechange, qthemy-sb:change, qthemy-sb:autoplay, and qthemy-sb:userinteract events on each slider element.
• Editor: define window.QthemySBBuilderExtension (documented at the top of assets/admin/js/admin-builder.js).
• PHP: the qthemy_sb_render_config and qthemy_sb_sanitize_data filters and the qthemy_sb_frontend_assets_enqueued action.
• Template library: the qthemy_sb_templates_api filter (or the QTHEMY_SB_TEMPLATES_API constant) points the library at another address, and the qthemy_sb_template_license filter lets an add-on add its license details to requests for Pro templates.

External Services

Qthemy template library:

The Templates page and the “Start from a template” part of the Sliders page show ready-made sliders from the Qthemy template library on qthemy.com.

• What it is used for: listing the templates, showing a live preview of one, and importing it as a new slider.
• What is sent and when: when an administrator opens one of these pages, your site’s server requests the list of templates from https://qthemy.com/wp-json/qthemy/v1/slider-templates and keeps it for 12 hours. When an administrator previews or imports a template, the server requests that template, and an import also downloads the template’s images. These requests name only the template asked for and, like every request WordPress sends, carry your site’s address and your server’s IP address. For a Pro template, the Qthemy Slider Builder Pro add-on (when it is installed with an active license) adds its product name, license key, your site’s domain, and its version, which qthemy.com checks with the Qthemy license service.
• The administrator’s browser loads the templates’ cover images, a template’s short preview video while the pointer is on its cover (or in the preview of a Pro template without a license), and the images of a previewed template, directly from qthemy.com.
• Nothing is requested on the pages your visitors see, and no data about your visitors or your sliders is sent.
• The service is operated by Qthemy. Terms: https://qthemy.com/terms-and-conditions/ Privacy policy: https://qthemy.com/privacy-policy/