2017-05-03 8 views
3

내 페이지 중 하나에 Swiper 플러그인을 추가하려고합니다. 어떤 메신저 내가 바이올린에 추가 할 때 그것이 작동하는 카로틴 슬라이더 HTML페이지 크기가 변경되지 않으면 스 와이프 슬라이더가 작동하지 않습니다.

http://idangero.us/swiper/demos/05-slides-per-view.html 여기

<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
    <div class="swiper-slide">Slide 1</div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
    <div class="swiper-slide">Slide 4</div> 
    <div class="swiper-slide">Slide 5</div> 
    <div class="swiper-slide">Slide 6</div> 
    <div class="swiper-slide">Slide 7</div> 
    <div class="swiper-slide">Slide 8</div> 
    <div class="swiper-slide">Slide 9</div> 
    <div class="swiper-slide">Slide 10</div> 
    </div> 

    <div class="swiper-pagination"></div> 
    </div> 

JS

var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     slidesPerView: 3, 
     paginationClickable: true, 
     spaceBetween: 30, 
     // Navigation arrows 
    nextButton: '.swiper-button-next', 
    prevButton: '.swiper-button-prev', 
    }); 

을 얻을 통합 달성하려고하고 있지만 때 내가 firebug를 열거 나 페이지 (http://vidznet.com/ng1/swiper/swipe.html)의 크기를 조정할 때까지 내 html 페이지에 스 와이퍼 그다지 추가하지 않는다 Im its conflicting when init ializing 때문에 콘솔에 오류가 없습니다.

은 약간의 시간을 보내고 난 후에 나는 JQuery와의 문제가 될 거라고 생각하고 나는 또한 추가

pagebeforecreate 여전히

$(document).on("pagebeforecreate", "#new_",function(event) { 

하지만 같은 내부의 코드를 포장 아래의 코드

swiper.updateContainerSize(); 

컨테이너 크기를 업데이트 할 예정이지만 여전히 작동하지 않습니다.

도움이 될 것입니다.

답변

1

당신은 시도 할 수 :

$(window).on({ 
    load: function(){ 
     $(this).trigger('resize'); 
    } 
    }); 

을 그것이 stickytape 솔루션의 조금 비록.

+0

않아요 당신이 ('크기 조정') $ (창) .trigger을 시도 할 수 :( – LiveEn

+1

을 작동하는 것, 하나의 초 지연과의 setTimeout 함수 -하지 솔루션이지만 테스트와 마찬가지로.로드 시퀀스와 관련이 있다고 생각합니다. – Sam0

1

사용이 코드 :

swiper.update();