Question

我正在使用AngularJs指令angular-slick-carousel：https://github.com/devmark/angular-slick-carousel

它是jquery光滑轮播插件的AngularJs指令。

我在无限模式下使用动态数据。关于光滑方向移动，我希望数字增加或减少。虽然我的数据发生了变化，但每次碰到边缘时，光滑都会重置为默认值。我认为这是因为这些值是在初始化时克隆的，所以它给出了无限的应用。有没有什么办法解决这一问题？这是我的傻瓜： http://plnkr.co/edit/mzbO1e?p=preview

控制器：

$scope.slickData=[
{value:0},
{value:1},
{value:2},
{value:3},
{value:4},
{value:5},
{value:6}];
$scope.slickConfig={
slidesToShow: 5,
slidesToScroll: 1,
enabled: true,
infinite: true,
arrows: true,
initialSlide: 1,
method: {},
event:{
  beforeChange: function (event, slick, currentSlide, nextSlide) {
                $scope.slickLoaded=false;
                if(currentSlide==0&&nextSlide==6){
                    $scope.slickData[nextSlide].value=$scope.slickData[currentSlide].value-1;
                }else if(currentSlide==2&&nextSlide==3){
                    $scope.slickData[0].value=$scope.slickData[6].value+1;
                }else if(currentSlide>nextSlide&&!(nextSlide==0&&currentSlide==6)){
                    $scope.slickData[nextSlide].value=$scope.slickData[currentSlide].value-1;
                }else if(currentSlide>1){
                    $scope.slickData[currentSlide-2].value=$scope.slickData[currentSlide-3].value+1;
                }else if(currentSlide==0&&nextSlide==1){
                    $scope.slickData[5].value=$scope.slickData[4].value+1;
                }else if (currentSlide==1&&nextSlide==2){
                    $scope.slickData[6].value=$scope.slickData[5].value+1;
                }
                $scope.slickLoaded=true;
            },
}}
$scope.slickLoaded=true;

HTML：

<div class="container" ng-controller="SlickController">
<slick ng-if="slickLoaded" settings="slickConfig">
  <div ng-repeat="slide in slickData track by $index">
    <h3>{{$index}}</h3>
    <h3>{{slickData[$index].value}}</h3>
  </div>
</slick>
<div ng-repeat="slide in slickData track by $index">
    {{$index}} : {{slickData[$index]}}
</div>

无限光滑的旋转木马

0 个答案: