AngularJS Carousel Slider (экран мигает между каждым изображением) - PullRequest
Новая
       24

AngularJS Carousel Slider (экран мигает между каждым изображением)

0 голосов
/ 30 октября 2018

У меня есть ползунок карусели, который не работает должным образом. Панель навигации, стрелки и индикаторы перемещаются вверх между изображениями. Это дает мигающий вид между каждым изображением. Как я могу предотвратить это? Также изображения всегда перемещаются справа налево, даже когда я нажимаю стрелку влево. Но главное - это элементы, которые перемещаются к вершине между каждым изображением. Очень ценю любые идеи.
templateurl.html 

<div id ="myCarousel"class="carousel slide" class ="item" data-ride="carousel">

        <ol class ="carousel-indicators">
         <li data-target = "#myCarousel" ng-repeat="image in images"  ng-class="{active:isCurrentSlideIndex($index)}" data-slide-to="{{image}}"></li>
          </ol>
          <div class="carousel-inner">
            <div ng-class="{item: true, active: isCurrentSlideIndex($index)}"ng-repeat="image in images">
              <img class = "img" ng-src="images/{{currentFolder}}/{{image}}" alt="Slide number {{image}}">

    </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev()"><span class="glyphicon glyphicon-chevron-left"></span></a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next()"><span class="glyphicon glyphicon-chevron-right"></span></a>
      </div>
    </div>

Index.html 

 <slider images="images"/>

app.js 

var sliderApp=angular.module('sliderApp',['ngAnimate','ui.bootstrap']);

sliderApp.controller('SliderController', function($scope) {

  $scope.uri="images";
  $scope.folders =['cats','dogs'];
  $scope.images =["1.JPG","2.JPG","3.JPG"];
  $scope.currentFolder = $scope.folders[0];
  $scope.selectFolder = function(folder) {
    $scope.currentFolder=folder;
  };
  $scope.activeFolder = function(folder) {
    return (folder ===$scope.currentFolder);
  }
});


    sliderApp.directive('slider', function ($timeout) {
      return {

        link: function ($scope, elem, attrs) {

        $scope.currentIndex=0;

        $scope.next=function(){
          $scope.currentIndex<$scope.images.length- 1 ? $scope.currentIndex++ :$scope.currentIndex=0;
        };

        $scope.prev=function(){
          $scope.currentIndex >0 ?$scope.currentIndex-- : $scope.currentIndex=$scope.images.length -1;
        };

        $scope.isCurrentSlideIndex = function (index) {
                return $scope.currentIndex === index;
            };


        $scope.$watch('currentIndex',function(){
          $scope.images.forEach(function(image){
            image.visible=false;
          });
          $scope.images[$scope.currentIndex].visible=true;
        });

        /* Start: For Automatic slideshow*/

        var timer;

        var sliderFunc=function(){
          timer=$timeout(function(){
            $scope.next();
            timer=$timeout(sliderFunc,4000);
          },4000);
        };

        sliderFunc();

        $scope.$on('$destroy',function(){
          $timeout.cancel(timer);
        });

        /* End : For Automatic slideshow*/

        },
      templateUrl:'templates/templateurl.html'
      }
    });
...