Angular.jsのSwiperプラグインを使用してスライドできない問題を解決する方法

以下に、Angular.js で Swiper プラグインを使用するときにスライドできない問題を解決する記事を紹介します。これは良い参考値であり、皆様のお役に立てれば幸いです。

スワイパーが非常に優れたインタラクティブエクスペリエンスを備えたカルーセルプラグインであることは誰もが知っています

しかし、スワイパーが角度（ng-repeat）を介してループアウトする問題の解決策はカルーセルではありません

通常、私たちはそれを次のように実装します次のメソッド:

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

ただし、それでも機能しません。 注: json でデータを取得している場合は、カルーセル js コードを記述する必要があります。 get data では、最初に取得するため、データに対してのみカルーセルが実行されます。外部に配置した場合、カルーセル データは取得できません。

そのため、解決策は $http リクエストに swiper の初期化メソッドを入れて実行することです

カルーセルを実現するには関数 successCallback() メソッドに次のコードを追加します

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

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

あなたのために上記をまとめました。将来お役に立てば幸いです。

関連記事:

jQueryを使って左右にスライドさせるtoggleメソッドを実装するには？

JSフォームで値の転送とURLエンコード変換を実装するにはどうすればよいですか?

vueを介してv-forループで最初のチェックボックスがデフォルトでチェックされるようにするにはどうすればよいですか?

以上がAngular.jsのSwiperプラグインを使用してスライドできない問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。