问题 AngularJS多项旋转木马

我正在使用UI Bootstrap轮播，但它只显示一张幻灯片 - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview。
如何以这种方式显示图像？

img1 - img2 - img3
then
img2 - img3 - img4 
then
img3 -img4 - img5
then
img4 - img5 - img6
then
img5 - img6 - img1

（就像在这个旋转木马 http://coolcarousels.frebsite.nl/c/58/）

857

2018-04-28 18:34

起源

答案:

您可以使用ng-repeat中的$ index创建其他图像并添加下两个图像。

http://plnkr.co/edit/oVRYCfaMeRW5a54nzmem?p=preview

 <carousel interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <div class="" style="width:600px;margin:auto;">
    <div >
    <img ng-src="{{slide.image}}" width="200px" style="float:left;">
    </div>
    <div >
    <img ng-src="{{slides[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" >
    </div>
     <div >
    <img ng-src="{{slides[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" >
    </div>
    </div>
  </slide>
</carousel>

获取旋转图像的代码

$scope.getSecondIndex = function(index)
  {
    if(index-slides.length>=0)
      return index-slides.length;
    else
      return index;
  }

2018-04-28 18:47

我已经尝试过了。问题是{{slides [$ index + 1] .image}}和{{slides [$ index + 2] .image}}在滑块末尾是空的。例如，如果我在$ scope.slides中有4个图像，它将显示如下：img1 -img2 - img3然后img4 - empty - empty。但我想让它显示img1 - img2 - img3，然后img4 - img1 - img2，然后img1 - img2 - img3等等。 - Belle

我已更新代码以旋转图像。 - Kathir

谢谢，它的工作原理。但它仍然与我想要的有点不同。是否可以像在此滑块中一样显示图像 coolcarousels.frebsite.nl/c/58？ - Belle

@Kathir我在角度2中遇到问题。你有任何例子。 - Shabbir Dhangot

这个答案不能正常运作。动画是错误的，它做的动画就像它偏移了3但它实际上将图像偏移了1。 - jrobichaud

答案:

您可以使用ng-repeat中的$ index创建其他图像并添加下两个图像。

http://plnkr.co/edit/oVRYCfaMeRW5a54nzmem?p=preview

 <carousel interval="myInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <div class="" style="width:600px;margin:auto;">
    <div >
    <img ng-src="{{slide.image}}" width="200px" style="float:left;">
    </div>
    <div >
    <img ng-src="{{slides[getSecondIndex($index+1)].image}}" width="200px" style="float:left;" >
    </div>
     <div >
    <img ng-src="{{slides[getSecondIndex($index+2)].image}}" width="200px" style="float:left;" >
    </div>
    </div>
  </slide>
</carousel>

获取旋转图像的代码

$scope.getSecondIndex = function(index)
  {
    if(index-slides.length>=0)
      return index-slides.length;
    else
      return index;
  }

2018-04-28 18:47

我已更新代码以旋转图像。 - Kathir

谢谢，它的工作原理。但它仍然与我想要的有点不同。是否可以像在此滑块中一样显示图像 coolcarousels.frebsite.nl/c/58？ - Belle

@Kathir我在角度2中遇到问题。你有任何例子。 - Shabbir Dhangot

这个答案不能正常运作。动画是错误的，它做的动画就像它偏移了3但它实际上将图像偏移了1。 - jrobichaud

我正在使用ng-repeat并转换为图像，这是我的代码，但没有转换

<carousel interval="myInterval">
    <slide ng-repeat="rc in RequirementConsultanctDetails" active="slide.active">

        <div class="" style="width:600px;margin:auto;" ng-show="rc.photo!=null">
            <div>
                <img ng-src="data:image/jpeg;base64,{{rc.photo}}" width="200px" style="float:left;">               
            </div>
            <div>                 
                <img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+1)].photo}}" width="200px" style="float:left;">                  
            </div>
            <div>                 
                <img ng-src="{{RequirementConsultanctDetails[getSecondIndex($index+2)].photo}}" width="200px" style="float:left;">                   
            </div>
        </div>
    </slide>
</carousel>

2018-05-29 07:02

这是一个答案还是一个问题？ - Pang

问题 AngularJS多项旋转木马

答案:

答案:

热门问题