Angular.js에서 Swiper 플러그인을 사용하여 슬라이드할 수 없는 문제를 해결하는 방법

아래에서는 Angular.js에서 Swiper 플러그인을 사용할 때 슬라이드가 되지 않는 문제를 해결한 기사를 공유하겠습니다. 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

우리 모두는 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 데이터에서는 먼저 가져오므로 Carousel은 데이터에 대해서만 수행되므로 외부에 배치하면 Carousel 데이터를 가져올 수 없습니다.

그래서 해결책은 $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를 사용하여 왼쪽과 오른쪽으로 슬라이딩하는 토글 방법을 구현하는 방법은 무엇입니까?

JS 형식으로 값 전송 및 URL 인코딩 변환을 구현하는 방법은 무엇입니까?

vue를 통해 v-for 루프의 첫 번째 확인란을 기본적으로 선택하도록 설정하는 방법은 무엇인가요?

위 내용은 Angular.js에서 Swiper 플러그인을 사용하여 슬라이드할 수 없는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!