Idangerous Swiper not swiping

Question

I'm currently experiencing problems with idangerous swiper. I use following libraries which are included in that order:

jQuery 1.9.1
jQuery Mobile 1.4.5
Idangerous Swiper (jQuery) 3.0.6

Before adding the swiper to DOM via javascript I'm modifying it to fit my needs.

At the end following html code is generated which should match the needs of the api:

<div class="tx-cctest-pi1">
        <div class="cctest-gallery-link" id="pageId-13">
            <div class="swiper-13 swiper-container">
               <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild1.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild2.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild3.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild4.jpg">
                  </div>
               </div>
            </div>
            <div class="albumName">Architektur</div>
        </div>
</div>

The code is generated dynamically and should generate multiple swipers (therefore the class name swiper-X).

The code for adding the swiper to the element is following one:

new Swiper('.swiper-'+ pageId, {
    direction: 'horizontal',
    loop: true,
    preloadImages: true,
    updateOnImagesReady: true,
    grabCursor: true
});

There are no errors in the console, and the swiper does not swipe.

Update Problem is solved. Checked back the code after enigma prove that code seems to work fine without AJAX. As mentioned in the comment below the post of enigma the problem was that the ajax call was not even done but the swiper was already created. So putting the Swiper construct within the done() callback of the $.ajax everything is working fine.

try $('.swiper-'+ pageId) (and check - is it get you needs element, like $('.swiper-13') @thedom — Legendary
Returns an object but with length: 0 although it is definitely in DOM (checked with Chrome developer tools). — thedom
This question really needs a mcve. The attached codepen is not minimal and it doesn't work (it would take a lot of time just to clean it before seeing what would be the real issue), it is not complete (missing libraries and CSS), and it is not reliable for verification (because of the number of errors). — Alvaro Montoro

enigma enigma · Accepted Answer · 2015-04-22T18:53:54

Given the code in your question, and the fact that you're sure the page id is correct, I generated this JSfiddle, that shows it works perfectly. The fault is obviously not in the code quoted.

Looking at the codepen in your comment, some errors are apparent:

<div class="test"-gallery-link link-left" id="pageId-13"> should be <div class="test-gallery-link link-left" id="pageId-13">, note the removed "
There is an additional unnecessary </div> at the end
Inside the callback, this refers to the jqXHR object of the Ajax call, not the element the event handler was bound to. So $(this) was probably not doing what you thought it was. I fixed this by hard coding the url rather than using var url = $(this).attr('src');, you would want to fix it by storing $(this) before entering the ajax call.

After fixing these issues, I then put all your codepen code into a JSfiddle with the correct linked libraries and removed the mobile check, and ajax call (skipped straight into done()).

With the above changes made, the JSfiddle appears to be doing roughly what you want it to be doing.

Idangerous Swiper not swiping

1 Answers