Swiper slider does not work if the page does not change

Question

I am trying to add a Swiper plugin to one of my pages. What I'm trying to achieve is to integrate, get the carousel slider here http://idangero.us/swiper/demos/05-slides-per-view.html

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

When I add it to the fiddle, it works, but when I add it to my html page, swiper does not work until I open firebug or change the page size ( http://vidznet.com/ng1/swiper/swipe. html ). I am not sure if during initialization it conflicts because there are no errors in the console.

After spending some time, I thought it might be a jquery problem, and wrapped the code inside

pagebeforecreate

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

but still the same

I also added the code below

swiper.updateContainerSize();

, .

.

Answer 1

:

swiper.update();

Answer 2

:

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

stickytape.

Answer 3

Swiper :

• , ;
• , ;
• .
  • observer: true;
  • observeParents: true.

Swiper ( ), !