时间戳

首页 > 解决方案 > Bootstrap Carousel：变量不循环的指标

bootstrap-4 - Bootstrap Carousel：变量不循环的指标

问题描述

我在 Bootstrap v4.6.0 中有一个轮播：

<div id="myc{{idcarousel}}" class="carousel slide carousel-fade" data-ride="carousel">

我使用如下指标和控件：

<ol class="carousel-indicators">
{{#each imagefile as |item|}}
{{#if @first}} 
        <li data-target="#myc{{idcarousel}}" data-slide-to="0" class="active"></li> 
    {{else}} 
    <li data-target="#myc{{idcarousel}}" data-slide-to="{{@index}}"></li>
    {{/if}}
{{/each}}

<a class="carousel-control-prev" href="#myc{{idcarousel}}" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myc{{idcarousel}}" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
</a>

但只有控件起作用。当我单击指示器时，图像不会滑动。如何以不同的方式处理指标的数据目标？谢谢你的提示。

标签： bootstrap-4handlebars.js

解决方案

如果复杂，为什么容易是另一种选择。我现在使用车把助手。

helpers: {
  mycar: function(value) {
       return "#myc" + value;
 }
}


<ol class="carousel-indicators">
{{#each datei as |item|}}
{{#if @first}} 
        <li data-target="{{mycar ../idcarousel}}" data-slide-to="0" class="active"> 
</li> 
    {{else}} 
    <li data-target="{{mycar ../idcarousel}}" data-slide-to="{{@index}}"></li>
    {{/if}}
{{/each}}
</ol>

问候

推荐阅读