Solved
How to stop OOTB Carousels JS from executing ?
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>