Ionic1 Dynamic Slides – problem with using ion-slides instead ion-slide-box

ionic-v1
1

Hy Guys,

I was translating an older WORKING project from ion-slide-box to ion-slides. Having some problems with my new version. In the ion-slides version only the first two and the last slides are loaded. The slides in between are empty. I suppose that it has to do something with this attributes that the developer used on the ion-slide-box…

on-slide-changed="slideChanged($index)" active-slide="selectedSlide"

Here is my old template for the slides:

    <ion-slide-box style="height:100%; background:#8080c5;" on-slide-changed="slideChanged($index)" active-slide="selectedSlide"
does-continue="true" show-pager="true">

  <ion-slide ng-repeat="slide in allSlides">

    <ion-scroll zooming="false" direction="y">
      <div style="height:100%;" ng-bind-html="trustAsHtml(slide.src)">
      </div>
    </ion-scroll>
  </ion-slide>
</ion-slide-box>

Here is my new template:

<ion-slides options="sliderOptions" slider="swiper" on-slide-changed="slideChanged($index)" active-slide="selectedSlide">
		<ion-slide-page class="vslide" ng-repeat="slide in allSlides" ng-bind-html="trustAsHtml(slide.src)">
		</ion-slide-page>
	</ion-slides>

And finally here is my controller:

angular.module('IMA')
.controller('SlidesCtrl', function ($scope, $ionicSlideBoxDelegate, $filter, $http, $templateCache, $sce) {
	var makeSlide = function (id, name, url) {
		return {
			id: id,
			templateName: name,
			url: url,
			src: '',
			loadSource: function (slide) {
				$http.get(slide.url).then(function (response) {
					slide.src = response.data;
				});
			},
			deleteSource: function (slide) {
				delete slide.src
			}
		}
	};

	$scope.trustAsHtml = function (string) {
		return $sce.trustAsHtml(string);
	};

	$scope.allSlides = [
		makeSlide(0, "start", "templates/intro.html"),
		makeSlide(1, "intro", "templates/start.html"),
	 	makeSlide(2, "intro2", "templates/start.html"),
		makeSlide(3, "intro3", "templates/start.html"),
		makeSlide(4, "intro4", "templates/start.html")
	];



	$scope.sliderOptions = {
		loop: true,
		effect: 'slide',
		speed: 400,
		nextButton: '.swiper-button-next',
		prevButton: '.swiper-button-prev',
		paginationType: 'bullets',
		paginationHide: true,
	};

	$scope.lastSlide = undefined;

	$scope.getPreviousAndFollowing = function (idx) {
		var previous, following;
		if (idx == 0) {
			previous = $scope.allSlides.length - 1;
		} else {
			previous = idx - 1;
		}
		if (idx == $scope.allSlides.length - 1) {
			following = 0;
		} else {
			following = idx + 1;
		}

		return {
			prev: previous,
			foll: following
		}
	}

	$scope.updateSlideCache = function (idx) {

		var slides = $scope.getPreviousAndFollowing(idx);


		if ($scope.lastSlide === undefined) {
			$scope.allSlides[slides.prev].loadSource($scope.allSlides[slides.prev]);
			$scope.allSlides[idx].loadSource($scope.allSlides[idx]);
			$scope.allSlides[slides.foll].loadSource($scope.allSlides[slides.foll]);
		} else {
			if (($scope.lastSlide < idx) || (idx == 0 && $scope.lastSlide > idx)) { // nach rechts
				var previousSlide = $scope.getPreviousAndFollowing(slides.prev);
				$scope.allSlides[previousSlide.prev].deleteSource($scope.allSlides[previousSlide.prev]);
				$scope.allSlides[slides.foll].loadSource($scope.allSlides[slides.foll]);
			} else { // nach links
				var followingSlide = $scope.getPreviousAndFollowing(slides.foll);
				$scope.allSlides[slides.prev].loadSource($scope.allSlides[slides.prev]);
				$scope.allSlides[followingSlide.foll].deleteSource($scope.allSlides[followingSlide.foll]);
			}
		}






		$scope.lastSlide = idx;
	};

	$scope.slideChanged = function (idx) {
		$scope.updateSlideCache(idx);
	};

	$scope.updateSlideCache(0);

});

I hope, somebody can find my mistake(s), would really love to use ion-slides – sorry for my ignorance, but I am not really a coder :slight_smile:

THANKS!