自动播放在闪电轮播中不起作用

Question

我从http://www.lightningdesignsystem.com/components/carousel/#About-Carousel 获得此代码。它应该做自动播放功能，但它不起作用，即使是圆形按钮也不起作用。我错过了什么吗？ 我也知道 LWC 轮播，但我需要定制一些在那上面不可能的东西，所以我尝试了这个。

代码

<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>

Answer 1

代码仅用于理解目的。这不包括 JavaScript。您必须通过以下方面将代码连接到 JS：

1. 在“圆形按钮”的锚定标签上编写 onclick 函数，就像您所说的那样。
2. 这个 JS 按钮应该调用一个方法来做以下事情：
   1. 通过删除所有存在的“slds-is-active”类，将所有具有“slds-carousel__indicator-action”类的标签标记为非活动。
   2. 查找点击了哪个元素，并在类属性中添加“slds-is-active”。
   3. 仅对被点击的元素设置 area selected 属性为 true。
   4. 使实际面板的选项卡索引应为 0 以显示选项卡。这可以通过指标 Id 匹配。对于所有其他人，它应该是 -1。
   5. 使用公式动态分配变换样式：-100*index

这里是示例：

<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 :

选择元素（索引）{

    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];

}