BUG: Bootstrap Carousel Slider is not working

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome

Reproducible demo link

NO LINK

Describe the bug

How to reproduce the bug?

... Add Bootstrap in GrapesJS init function
... Add Slider component as per bootstrap documentation
... Slider shows only first image and image doesn't change

What is the expected behavior? ... Slider should start with first image and animate till the last image

What is the current behavior? ... Slider shows just first active image and then nothing happens at all

If is necessary to execute some code in order to reproduce the bug, paste it here below:

The HTML I am using is 

<div data-gjs-highlightable="true" id="c7551f9a8-7324-4f9b-ba04-2f4e90522b1c" data-gjs-type="default" draggable="true" class="carousel slide" data-bs-ride="carousel">
<div data-gjs-highlightable="true" id="irrxo5" data-gjs-type="default" draggable="true" class="carousel-inner">
<div data-gjs-highlightable="true" id="c171d86b1-5615-42a4-9898-d7fdf7c761bb" data-gjs-type="default" draggable="true" class="carousel-item active" data-bs-interval="1000">
<img id="c0b9d1877-e6db-4b41-9123-c86d9454364c" data-gjs-type="image" draggable="true" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRM4o1hlPBfAyhlk2oHiCbo3wz6V7RI4yrljw&amp;usqp=CAU" class="">
</div>
<div data-gjs-highlightable="true" id="c935920c3-d162-46e3-b686-35b713c95182" data-gjs-type="default" draggable="true" class="carousel-item" data-bs-interval="1000">
<img id="c6c94de87-956f-4342-8b01-6053420b69ae" data-gjs-type="image" draggable="true" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRznJFvfPb8GZeayLxLLEe4mP5_L5OUObiCOA&amp;usqp=CAU">
</div>
<div data-gjs-highlightable="true" id="cfe03d6ab-5361-4c19-a16b-68f315948790" data-gjs-type="default" draggable="true" class="carousel-item" data-bs-interval="1000">
<img id="c41e0f231-c54c-4d6a-9421-2ae7463828ff" data-gjs-type="image" draggable="true" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZV7qZYQn_wD0VqfJKxolmB0OSj_zRH-wznw&amp;usqp=CAU">
</div>
</div>
</div>

This is Grapes JS init function

grapesjs.init({
    container: "#gjs",
    fromElement: true,
    plugins: ["gjs-preset-newsletter", "grapesjs-lory-slider"],
    pluginsOpts: {
      "gjs-preset-newsletter": {
        modalTitleImport: "Import template",
      },
      "grapesjs-lory-slider": {},
    },
    canvas: {
      styles: [
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
      ],
      scripts: [
        "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
      ],
    },
    storageManager: false,
  });

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (2)

artf• June 22, 20221 reactions

Sorry but the issue tracker is mainly for bugs in the core grapesjs module and I believe in this case you should instantiate the bootstrap.Carousel manually via JS (eg. by creating a custom component with JS) as the editor has to load canvas-related styles/scripts before the content.

shelendravashishtha2• June 28, 20220 reactions

Hi Arthur, is there any way of getting screen sized specific styles in grapesjs, like different styles based on media query styles ?

BUG: Bootstrap Carousel Slider is not working

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (2)

Related Questions and Answers

BUG: Performance issue while dragging component to canvas when you have 2k component on canvas

BUG: Duplicated links are added using rte

BUG: When you delete a component, duplicate classes between components will be deleted.

BUG: XSS when add class name to Selector Manager

Paid Plugins That Match This Issue

Browse Plugin Categories