So lösen Sie das Problem, dass Sie nicht gleiten können, indem Sie das Swiper-Plug-in in Angular.js verwenden

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem löst, dass bei Verwendung des Swiper-Plug-Ins in Angular.js kein Slide möglich ist. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Wir alle wissen, dass Swiper ein Karussell-Plug-in mit einem sehr guten interaktiven Erlebnis ist

Aber die Lösung für Swiper, die durch Winkelschleifen (ng-repeat) geloopt wird, kann nicht Karussell sein

Normalerweise führen wir es mit den folgenden Methoden aus:

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) {
   // 请求失败执行代码
  });
 });

Aber es funktioniert immer noch nicht. Hinweis: Wenn Sie Daten in JSON abrufen, müssen Sie beim Abrufen der Daten den Karussell-JS-Code schreiben, weil Es ruft zuerst die Daten ab. Wenn Sie das Karussell extern platzieren, können die Karusselldaten nicht abgerufen werden.

Die Lösung besteht also darin, die Initialisierungsmethode von Swiper in die $http-Anfrage einzufügen und sie auszuführen

Fügen Sie den folgenden Code zur Methode successCallback() hinzu, um Karussell zu erreichen

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
   });

Der vollständige js-Code lautet wie folgt:

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) {
   // 请求失败执行代码
  });
 });

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

Wie verwende ich jQuery, um die Umschaltmethode zum Schieben nach links und rechts zu implementieren?

Wie implementiert man die Wertübergabe und die URL-Codierungskonvertierung in JS-Formularen?

Wie überprüfe ich das erste standardmäßig in der V-for-Schleife-Kontrollkästchen über Vue?

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass Sie nicht gleiten können, indem Sie das Swiper-Plug-in in Angular.js verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!