Comment résoudre le problème de l'impossibilité de glisser à l'aide du plug-in Swiper dans Angular.js

Ci-dessous, je vais partager avec vous un article qui résout le problème de l'impossibilité de glisser lors de l'utilisation du plug-in Swiper dans Angular.js. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Nous savons tous que swiper est un plug-in de carrousel avec une très bonne expérience interactive

Mais la solution pour swiper en boucle via angulaire (ng-repeat) ne peut pas être un carrousel

Habituellement, nous l'exécutons via les méthodes suivantes :

html

<p class="swiper-container" ng-controller="swiperController">
 <p class="swiper-wrapper">
  <p class="swiper-slide" ng-repeat="informarion in imgSrcs">
   <img ng-src="{{informarion.sliderSrc}}" />
  </p>
 </p>
 <!-- Add Pagination -->
 <p class="swiper-pagination"></p>
 <!-- Add Arrows -->
</p>

js

var myapp=angular.module("myApp",[]);
 //轮播图的控制器
 myapp.controller("swiperController",function($scope,$http){
  //请求轮播图路径
  $http({
   method: 'post',
   url: 'json/myJson.json'
  }).then(function successCallback(response) {
   $scope.imgSrcs = response.data.sites;
  }, function errorCallback(response) {
   // 请求失败执行代码
  });
 });

Mais cela ne fonctionne toujours pas Remarque : Si vous obtenez des données en json, vous devez écrire le code js du carrousel dans le fichier. obtenir des données, car les données sont obtenues avant l'exécution du carrousel. Si vous les placez à l'extérieur, les données du carrousel ne peuvent pas être obtenues.

La solution est donc de mettre la méthode d'initialisation de swiper dans la requête $http et de l'exécuter

Ajoutez le code suivant à la méthode function successCallback() pour réaliser le carrousel

.

var swiper = new Swiper('.swiper-container', {//重置轮播加载方法
    pagination: '.swiper-pagination',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    keyboardControl: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true//修改swiper的父元素时，自动初始化swiper
   });

Le code js complet est le suivant :

var myapp=angular.module("myApp",[]);
 //轮播图的控制器
 myapp.controller("swiperController",function($scope,$http){
  //请求轮播图路径
  $http({
   method: 'post',
   url: 'json/myJson.json'
  }).then(function successCallback(response) {
   $scope.imgSrcs = response.data.sites;
   var swiper = new Swiper('.swiper-container', {//重置轮播加载方法
    pagination: '.swiper-pagination',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    keyboardControl: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true//修改swiper的父元素时，自动初始化swiper
   });
  }, function errorCallback(response) {
   // 请求失败执行代码
  });
 });

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile. à tout le monde à l'avenir.

Articles associés :

Comment utiliser jQuery pour implémenter la méthode bascule de glissement vers la gauche et la droite ?

Comment implémenter la conversion de transmission de valeurs et d'encodage d'URL dans les formulaires JS ?

Comment cocher le premier par défaut dans la case à cocher de la boucle v-for via vue ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!