Issue #3612Opened July 12, 2021by TRIGGEREDcoder0 reactions

BUG: The grapesjs slider buttons, tabs are not working as expected

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 (3)

artfJuly 27, 20210 reactions

Are you able to provide a reproducible demo, please?

TRIGGEREDcoderJuly 30, 20210 reactions

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.

artfJuly 31, 20210 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.