Issue #3612💬 AnsweredOpened July 12, 2021by TRIGGEREDcoder0 reactions

question style-manager components bug typescript

The grapesjs slider buttons, tabs are not working as expected

Quick answerby artf

Are you able to provide a reproducible demo, please?

Question

Version 0.17.19(grapesjs) Version 0.1.5(grapesjs-lory-slider) Version 1.0.6(grapesjs-tabs)

Are you able to reproduce the bug from the demo? No

What is the expected behavior? I should be able to traverse through different slides and tabs when clicked on previous or next buttons and tab names respectively.

Describe the bug detailed When I create a slider in a template and edit it for different slides and view it on grapesjs, then I am able to go through all the slides created. Similarly after creating a tabs block as well, I am able to see the different tabs and content inside. But when I take the html and css code generated to an angular application and try to run it, I am not able to traverse via different tabs or its contents and also slides or contents unlike while creating it on grapesjs.

HTML and CSS generated from grapesjs grapesjs.txt grapesjshtml.txt

Below is the code from my grapesjs file taken from source code. import gjsLorySlider from 'grapesjs-lory-slider'; import gjsTabs from 'grapesjs-tabs'; grapesjs.init({ container: '#gjs', autorender: true, showOffsets: true, fromElement: true, noticeOnUnload: false, forceClass: false, components: '', style: '', plugins: ['grapesjs-template-manager', gjsLorySlider, gjsTabs], pluginsOpts: { 'grapesjs-template-manager': { /* options / }, gjsPluginExport: { / options / }, gjsForms: { / options */ }, gjsNavbar: {}, gjsLorySlider: {}, },

What is the current behavior? The tab buttons and slider previous, next buttons not working at all once I integrate it with my existing set of angular code. The Notworking.png file is the one where there's no content at all although while creating I have the content as can be seen from other two image files. Similarly not able to move to different slides as well.

Are you able to attach screenshots, screencasts or a live demo? I will attach some screenshots and the code files. <img width="960" alt="Notworking" src="https://user-images.githubusercontent.com/43340158/125229896-52dcd080-e2f5-11eb-980e-edff8adbdb97.PNG"> <img width="795" alt="grapesjsslide2" src="https://user-images.githubusercontent.com/43340158/125229901-54a69400-e2f5-11eb-8188-1f8f54ae6620.PNG"> <img width="796" alt="grapesjsslide1" src="https://user-images.githubusercontent.com/43340158/125229902-553f2a80-e2f5-11eb-81bf-d2939801411d.PNG">

Answers (4)

artf• July 27, 2021

Are you able to provide a reproducible demo, please?

TRIGGEREDcoder• July 30, 2021

Sorry @artf , I was facing this because of the script tag in the generated html which is of no use in angular component html. How can I use the html generated in angular files if the html contains script tag functions.

artf• July 31, 2021

@TRIGGEREDcoder if the main issue is solved I'm closing this one. Please open a new Discussion if you have questions

ClaudeCode• May 17, 2026

Thanks for reporting this, @TRIGGEREDcoder.

The issue with The grapesjs slider buttons, tabs are not working as expected appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

The grapesjs slider buttons, tabs are not working as expected

Question

Answers (4)

Related Questions and Answers

AdoptStylesheet not supported in grapesJS

RTE insert link does not update DOM

Inconsistent Image Selection

Paste as plain text into Text component adds <font /> wrapper to pasted text

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

GrapesJS vs Webflow vs Tilda: What to Choose for Your Business in 2026

GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery

Browse Plugin Categories