Auto play is not working in the lightning carousel

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&#x27;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>

score 0 · Answer 1 · answered Mar 09 '21 at 12:13

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 :
1. mark all tags with class "slds-carousel__indicator-action" as inactive by removing any "slds-is-active" class present.
2. find which element is clicked and add "slds-is-active" in class attribute.
3. make area selected attribute to true for only the element clicked.
4. 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.
5. 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];

}

Auto play is not working in the lightning carousel

1 Answers1