BUG: Bootstrap Carousel Slider is not working

shelendravashishtha2 commented 2 years ago

GrapesJS version

[X] 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/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css",
      ],
      scripts: [
        "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js",
      ],
    },
    storageManager: false,
  });

Code of Conduct

[X] I agree to follow this project's Code of Conduct

artf commented 2 years ago

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 commented 2 years ago

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

GrapesJS / grapesjs