Карусель не работала со слайд-шоу и 3 изображения, показанные в angularjs - PullRequest
0 голосов
/ 07 ноября 2018

Я хочу сделать карусель со слайд-шоу, но в моем angularjs они не работали ни с одной этой каруселью, я стараюсь больше, чем просто так.

Это последний способ, который я использовал в html:

 <img ng-repeat="slide in slides" class="slide"     ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href ng-click="nextSlide()"></a>
<a class="arrow next" href ng-click="prevSlide()"></a>
<nav class="nav">
    <div class="wrapper">
    <ul class="dots">
    <li class="dot" ng-repeat="slide in slides">
                        <a href ng-class="{'active':isCurrentSlideIndex($index)}"
                           ng-click="setCurrentSlideIndex($index);">{{slide.name}}</a></li>
    </ul></div>
    </nav>

и js:

  $scope.slides = [{
        index: 1,
        name: 'Slide 1',
        image: '../image/slide1.png'
      },
      {
        index: 2,
        name: 'Slide 2',
        image: '../image/slide2.png'
      },
      {
        index: 3,
        name: 'Slide 3',
        image: '../image/slide3.png'
      }

    ];
    $scope.currentIndex = 0;
    $scope.setCurrentSlideIndex = function (index) {
        $scope.currentIndex = index;
    };
    $scope.isCurrentSlideIndex = function (index) {
        return $scope.currentIndex === index;
    };
    $scope.prevSlide = function () {
        $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
    };
    $scope.nextSlide = function () {
        $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
    };

  }])

  .run(['Carousel', (Carousel) => {
    Carousel.setOptions({
      arrows: true,
      autoplay: false,
      autoplaySpeed: 3000,
      cssEase: 'ease',
      dots: false,

      easing: 'linear',
      fade: false,
      infinite: true,
      initialSlide: 0,

      slidesToShow: 1,
      slidesToScroll: 1,
      speed: 500,
    });

и это пример изображения, которое я хочу сделать:

enter image description here

пожалуйста, кто-нибудь может помочь

...