How to stop OOTB Carousels JS from executing ?

Forum|Forum|2 years ago
June 18, 2023
2 replies
1324 views

I have inherited the OOTB carousel in one of my components and am trying to modify the look and feel of it. I am using OOTB carousels HTML inside my own component and it's backend model to fetch the data but want to write my own JS and CSS for it. I am using Glide JS for slides but having an issue as I have removed some classes of the OOTB carousel, which is causing an error in JS. So I want to stop the OOTB carousel's JS from executing. How do I do it ? How do I stop the OOTB JS?

I am attaching my HTML

<section class="cmp-hero-carousel" data-cmp-is="cmp-hero-carousel">
  <div class="cmp-hero-carousel__left-container">
    <h1 class="cmp-hero-carousel__header">Here goes our header</h1>
    <div class="cmp-hero-carousel__eyebrow">Eyebrow</div>
    <div class="cmp-hero-carousel__image-wrapper"><img src="https://cdn.pixabay.com/photo/2015/06/19/21/24/avenue-815297_640.jpg" alt=""></div>
  </div>
  <div class="cmp-hero-carousel__right-container">
    <div class="cmp-hero-carousel__slides-wrapper">
        <div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel"
        data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
        data-panelcontainer="${wcmmode.edit && 'carousel'}"
        id="${carousel.id}"
        class="cmp-carousel glide"
        role="group"
        aria-label="${carousel.accessibilityLabel}"
        aria-live="polite"
        aria-roledescription="carousel"
        data-cmp-is="carousel"
        data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"
        data-cmp-delay="${carousel.delay}"
        data-cmp-autopause-disabled="${carousel.autopauseDisabled}"
        data-cmp-data-layer="${carousel.data.json}"
        data-placeholder-text="${wcmmode.edit && 'Please add Carousel components here' @ i18n}">
            <div data-sly-test="${carousel.items && carousel.items.size > 0}"
                class="cmp-carousel__content glide__track"
                data-glide-el="track"
                aria-atomic="false"
                aria-live="${carousel.autoplay ? 'off' : 'polite'}">
                <div class="glide__slides">
                    <div data-sly-repeat.item="${carousel.items}"
                        data-sly-resource="${item.name @ decorationTagName='div'}"
                        id="${item.id}-tabpanel"
                        class="cmp-carousel__item glide__slide"
                        role="tabpanel"
                        aria-labelledby="${item.id}-tab"
                        aria-roledescription="slide"
                        aria-label="${'Slide {0} of {1}' @ format=[itemList.count, carousel.items.size], i18n}"
                        data-cmp-data-layer="${item.data.json}"
                        data-cmp-hook-carousel="item"></div>
                </div>
            </div>
            <div data-glide-el="controls">
                <button data-glide-dir="<<">Start</button>
                <button data-glide-dir=">>">End</button>
              </div>
            <sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
            data-sly-test="${(wcmmode.edit || wcmmode.preview) && carousel.items.size < 1}"></sly>
        </div>

    </div>
  </div>
</section>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Ankan_Ghosh

Thanks for the reply. I tried changing the class names. It somehow does not work. But I found out the issue.

The attribute: data-cmp-is="carousel" is the main entry point for the JS. If this attribute is not there, the OOTB JS would never work. So I replaced the value of this attribute with data-cmp-is="carousel-v1" and that stopped the OOTB carousel from being initialized. And now my entire custom JS is working and not being blocked by the errors. Thanks!

Tanika02

Level 7

Hello @ankan_ghosh -

Could you try/test the following options :

Replace the class name of the carousel's container element to something else? Referring to the class ="cmp-carousel glide".
Next, could you try checking the OOTB template reference
```
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
```
If this has any references to the OOTB client library that you are trying to disable?

Ankan_GhoshAuthorAccepted solution

Level 3

Thanks for the reply. I tried changing the class names. It somehow does not work. But I found out the issue.

The attribute: data-cmp-is="carousel" is the main entry point for the JS. If this attribute is not there, the OOTB JS would never work. So I replaced the value of this attribute with data-cmp-is="carousel-v1" and that stopped the OOTB carousel from being initialized. And now my entire custom JS is working and not being blocked by the errors. Thanks!