Angular swiper does not work without browser resize

[LenWhims]

The angular swiper does not appear and the pagination does not work without browser resize.

<div class="main-swiper">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" ng-repeat="file in files">
                <a href="Recipes/Details?id={{file.id}}">
                    <img ng-src="{{file.image}}"/>
                    <div class="swiper-text swiper-text-bottom">
                        <h1>{{file.name}}</h1>
                        <p>{{file.desc}}</p>
                    </div>
                </a>
            </div>
        </div>
        <!-- Add Navigation -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>
</div>

<script src="~/Scripts/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('MainController', function ($scope, $window, $http, $rootScope) {
            $scope.files = [];
            $http.get('/Files/GetAllUploadedFiles')
            .then(function (response) {
                for (var i = 0; i < response.data.length; i++) {
                    var reqFiles = { image: response.data[i].Path, name: response.data[i].Name, desc: response.data[i].Description, id: response.data[i].RecipeId  }
                    $scope.files.push(reqFiles);
                }
            })
        });

        var swiper = new Swiper('.main-swiper .swiper-container', {
            centeredSlides: true,
            slidesPerView: 'auto',
            autoplay: true,
            autoplay: 3000,
            loop: true,
            effect: 'coverflow',
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

[ali-idrizi]

Having the same issue here. Did you figure it out?

[LenWhims]

@ali-idrizi For now I used timeout so that the angular would finish loading first before the swiper.

[ali-idrizi]

@klentdiamond In my case the problem was that the swiper's parent had a display: none style and I was only showing it when necessary. As stated here by the developer:

Then you init it in a wrong time. It must be initialized when it is visible. Otherwise call its .update() method when it becomes visible. Or try to enable observer params

it has to be visible when it gets initialized. So what I did was replace display: none with visibility: hidden and it's working perfectly now.

Hope this helps someone.