Auto play is not working in the lightning carousel - salesforce

Question

i got this code from http://www.lightningdesignsystem.com/components/carousel/#About-Carousel. it was supposed to do the auto play function but it is not working, even the round buttons are also not working. am i missing something?
i also know about the LWC carousel, but i need to customize some of the things which was not possible on that, so was trying this one.
code
<template>
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style="transform:translateX(-0%)">
<div id="content-id-01" class="slds-carousel__panel" role="tabpanel" aria-hidden="false" aria-labelledby="indicator-id-01">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="0">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-01.jpg" alt="Visit App Exchange" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Visit App Exchange</h2>
<p>Extend Salesforce with the #1 business marketplace.</p>
</div>
</a>
</div>
<div id="content-id-02" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-02">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-02.jpg" alt="Click to Customize" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Click to Customize</h2>
<p>Use the Object Manager to add fields, build layouts, and more.</p>
</div>
</a>
</div>
<div id="content-id-03" class="slds-carousel__panel" role="tabpanel" aria-hidden="true" aria-labelledby="indicator-id-03">
<a href="javascript:void(0);" class="slds-carousel__panel-action slds-text-link_reset" tabindex="-1">
<div class="slds-carousel__image">
<img src="/assets/images/carousel/carousel-03.jpg" alt="Download SalesforceA" />
</div>
<div class="slds-carousel__content">
<h2 class="slds-carousel__content-title">Download SalesforceA</h2>
<p>Get the mobile app that's just for Salesforce admins.</p>
</div>
</a>
</div>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-01" class="slds-carousel__indicator-action slds-is-active" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="content-id-01" title="Visit App Exchange tab">
<span class="slds-assistive-text">Visit App Exchange tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-02" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-02" title="Click to Customize tab">
<span class="slds-assistive-text">Click to Customize tab</span>
</a>
</li>
<li class="slds-carousel__indicator" role="presentation">
<a id="indicator-id-03" class="slds-carousel__indicator-action" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="content-id-03" title="Download SalesforceA tab">
<span class="slds-assistive-text">Download SalesforceA tab</span>
</a>
</li>
</ul>
</div>
</div>
</template>

Answer 1

Code is only for understanding purpose. This does not include javascript. You have to wire your code to JS with following aspects:
Write onclick function on anchored tag of "round button" as you call them in question.
This JS button should call a method which does following things :
mark all tags with class "slds-carousel__indicator-action" as inactive by removing any "slds-is-active" class present.
find which element is clicked and add "slds-is-active" in class attribute.
make area selected attribute to true for only the element clicked.
make tab index of actual panel should be 0 for tab to be shown. This can be matched by indicator Id. and for all others it should -1.
assign transform style dynamically using formula : -100*index
Here is sample:
<template>
<div style="">
<div class="slds-carousel" id="carousel-example-generic" data-ride="carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#pause"></use>
</svg>
<span class="slds-assistive-text">Stop auto-play</span>
</button>
</span>
<div class="slds-carousel__panels" style={transformstyle}>
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<div id={dataIndex.contentid}
key={dataIndex.index}
class="slds-carousel__panel"
role="tabpanel"
aria-hidden={dataIndex.areahidden}
aria-labelledby={dataIndex.indicatorid}>
<div
class="slds-carousel__panel-action slds-text-link_reset"
tabindex={dataIndex.tabindex}>
<div >
<!-- Any LWC which you want to show in screen -->
</div>
</div>
</div>
</template>
</div>
<ul class="slds-carousel__indicators" role="tablist">
<template for:each={tableDataToDisplay} for:item='dataIndex'>
<li data-target="#carousel-example-generic"
key={dataIndex.index}
data-slide-to={dataIndex.dataslideto}
class="slds-carousel__indicator"
role="presentation">
<div id={dataIndex.indicatorid}
class={dataIndex.liclass}
data-index={dataIndex.index}
data-ariacontrols={dataIndex.contentid}
role="tab"
aria-selected={dataIndex.areaselected}
aria-controls={dataIndex.contentid}
onclick={handleclick}
title="Visit App Exchange tab">
</div>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>
in JS have this function :
selectelement(index){
this.template.querySelectorAll(".slds-carousel__indicator-action").forEach(ele=>{
ele.classList.add('slds-is-active');
ele.classList.remove('slds-is-active');
});
this.template.querySelector(`[data-index="${index}"]`).classList.add('slds-is-active');
this.dataDisplay.forEach(ele=>{
ele.areaselected = false;
ele.tabindex = -1;
ele.areahidden = true;
if(ele.index === index){
ele.areaselected = true;
ele.tabindex = 0;
ele.areahidden = false;
}
});
this.transformstyle = `transform:translateX(-${
index * 100
}%);`
this.dataDisplay = [...this.dataDisplay];
}