SwiperJS és AngularJS időzítése
2020-01-16T12:51:41+01:00
2020-01-17T20:48:38+01:00
2022-08-11T17:25:30+02:00
pop3
A jQuery-t használó SwiperJS (swiperjs.com) képnézegető és AngularJS 1.7 van az oldalon.
A swiper-be a megmutatandó képek címeit és útvonalát az angular töltené fel ng-repeat -tel, amikhez az infókat adatbázisból kér le htttp get-tel.

A problémám az időzítés, hogy a swiper konstruktora az onload-nál lefut, de az angular get-je aszinkron folyamat és ekkor még nem kapja meg az adatait (a képek címeit), ezért a swiper üres képeket mutat csak.

Hogyan tudnám a swiper konstruktorát az angular http-get mélyéről meghívni. Vagy mi lenne a megoldása ennek a problémának?

Környezet: jQuery 3.4.1,  Angular 1.7.9  Swiper 5.3

Nem tudok 2-es..9-es új Angular-ra váltani, az 1.7-esnél kell maradnom.

kódrészlet:

<script> $(function() { var mySwiper = new Swiper('.swiper-container', { spaceBetween: 30, loop: true, autoplay: { delay: 3000, }, effect: 'cube', }); }); // -- onload event </script> </head> <body class="secondary_color" ng-app="myApp" ng-controller="customersCtrl" > <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div ng-repeat="x in menupoints " class="swiper-slide" style="background-image:url({{x.full_filename}})"></div> </div> </div> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $scope.loadMenupoints = function (){ var param="xxxxxxxxx.php?method=load"; $http.get(param) .then(function(response) { $scope.msgText = response.data.response; if (response.data.error==0) { $scope.menupoints = response.data.menupoints; --> ITT kéne meghivni a swiper constructor-t } }); } $scope.loadMenupoints(); }); </script>
Mutasd a teljes hozzászólást!
Mutasd a teljes hozzászólást!

  • Köszönöm. Nem tudom ezt hogy tudnám az én kódomba illeszteni.

    De végülis megoldottam:

    A Swiper-t tudom hívni az angular kódból:

    $scope.startSwiper = function (){ console.log('Swiper has started'); $scope.mySwiper = new Swiper('.swiper-container', { spaceBetween: 30, loop: true, autoplay: { delay: 3000, }, effect: 'cube', }); };
    És igen, időzítést kell használni, ehhez injektálni kell a $timeout -ot és ha megjött a http get-re a válasz akkor onnan lehet indítani a swiper-t:

    $http.get(param) .then(function(response) { $scope.menupoints = response.data.menupoints; $timeout(function() { $scope.startSwiper(); }, 500); } });
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd