Using ng-repeat on iDangerous swiper slides

Question

It seems to me that using ng-repeat on swiper slides disables the possibility to use slides within slides. See JsFiddle link. It contains 4 horisontal slides where slide 2 contains a vertical slide with 2 slides. It works fine, but if I change the HTML

<!-- This works:-->
<div class="swiper-slide">

To:

<!-- This works:-->
<div class="swiper-slide" ng-repeat=”let in letArr”>

Then I get (as expected) 5 horizontal slides where slide 2 now are two slides: slide 2a and 2b. But I do not get any vertical slides (which I expected) on slide 2a and 2b. The pagination bullets for vertical slide selection are visible but they do not respond. Is that simply working as designed or am I missing something?

I can expand manually in the HTML my outer slide gallery but it will make maintenance difficult and errorprone.

Wayne F. Kaskie Wayne F. Kaskie · Accepted Answer · 2017-01-11T14:57:43

90% of the time when my sliders don't work, but are there or work partially (like the pagination buttons are built), a simple swiper.reInit() works.

With angular, in order to catch when the last slide is created in the DOM, I make a quick swiperSlide directive and do something like this:

.directive('swiperSlide', function() {
    return function (scope, element, attrs) {
        if (scope.$last) setTimeout(function () {
            swiper.reInit(); //make sure you initialize your swiper to a variable called "swiper" or replace "swiper" with whatever your swiper variable is
        }, 1);
    };
});

Using ng-repeat on iDangerous swiper slides

1 Answers