How to activate Swiper Slider on dynamically loaded HTML which is loaded via AJAX after submitting the form?
window.onload = function() {
const swiper = new Swiper('.worksSlider', {
// Optional parameters
loop: true,
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#7/swiper-bundle.min.css" rel="stylesheet"/>
<div class="worksSlider swiper-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slide 1
</div>
<div class="swiper-slide">
Slide 2
</div>
</div>
</div>
Related
So I'm trying to use the SwiperJS library, but it doesn't work. It's a pretty big website with A LOT of content on the page I'm trying to use it for. The strange thing is, on a small testing website of myself it does work. But when I try to use it on the bigger website console throws an error.
My code:
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
And the JS:
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" id="script-swiper"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
observer: true,
observeParents: true
});
</script>
Console error: Swiper is not defined at www.url.com/script.js
I already tried window.onload and to set a timeout of a few seconds before running new Swiper. Does anybody maybe know how to fix this?
You need to add CSS tag also in your header:
<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/></head>
p.s. I know it's a year later but hopefully this helps someone who comes across this question.
this is the entire code , please see what is the problem here, i have done everything given on the swiper js website. i have added the style links in the header and the required scripts in the body
<body>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script>
const swiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>
I'm using Swiper mobile touch slider (v. 4.0.5). I'm having a problem that I think is related to the slider initializing before images are loaded, which causes it not to function.
The only solution I've found is to call update() after a delay.
setTimeout(function() {
mySwiper.update();
}, 500);
But I don't like the half-second delay. If the slider must be reinitialized after images are loaded, I would rather that it happen efficiently as soon as the images are ready.
Documentation lists a updateOnImagesReady parameter which, when set to true, should reinitialize the slider after all of its images are loaded. But it doesn't seem to help.
updateOnImagesReady
When enabled Swiper will be reinitialized after all inner images ( tags) are loaded.
Required preloadImages: true
Under "events", the documentation lists an imagesReady event. I thought I could use this event to call update().
imagesReady
Event will be fired right after all inner images are loaded.
updateOnImagesReady should be also enabled
In my code below, the init event seems to fire, but I can't get imagesReady to fire.
Why is the imagesReady event not firing?
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
grabCursor: true,
effect: 'fade',
preloadImages: true,
updateOnImagesReady: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
console.log('initialized.'); // this works
},
imagesReady: function() {
console.log('images ready.'); // this doesn't work
}
}
});
body {
margin: 0;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
//dummyimage.com/450x200/F00/fff&text=450w 450w,
//dummyimage.com/600x200/F00/fff&text=600w 600w,
//dummyimage.com/900x200/F00/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/F00/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
//dummyimage.com/450x200/0F0/fff&text=450w 450w,
//dummyimage.com/600x200/0F0/fff&text=600w 600w,
//dummyimage.com/900x200/0F0/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/0F0/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
//dummyimage.com/450x200/00F/fff&text=450w 450w,
//dummyimage.com/600x200/00F/fff&text=600w 600w,
//dummyimage.com/900x200/00F/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/00F/fff&text=default"
alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Possibly related:
Swiper slider not working unless page is resized
Swiper slider space between not showing on load
iDangero Swiper only work when screen is resized
swiper doesn't work on page load
Edit:
The initialization problem seems to go away if I remove the effect:'fade' parameter. See slideChangeStart event does not fire when I swipe. But I want to use the "fade" effect. And I'd still like to know how to get the events to fire.
This issue seems to be fixed in version 4.0.7.
I'm not exactly sure why, but it might be due to changes on line 5958.
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
grabCursor: true,
effect: 'fade',
preloadImages: true,
updateOnImagesReady: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
console.log('initialized.'); // this works
},
imagesReady: function() {
console.log('images ready.'); // this works now, too!
}
}
});
body {
margin: 0;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
//dummyimage.com/450x200/F00/fff&text=450w 450w,
//dummyimage.com/600x200/F00/fff&text=600w 600w,
//dummyimage.com/900x200/F00/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/F00/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
//dummyimage.com/450x200/0F0/fff&text=450w 450w,
//dummyimage.com/600x200/0F0/fff&text=600w 600w,
//dummyimage.com/900x200/0F0/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/0F0/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
//dummyimage.com/450x200/00F/fff&text=450w 450w,
//dummyimage.com/600x200/00F/fff&text=600w 600w,
//dummyimage.com/900x200/00F/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/00F/fff&text=default"
alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
I was having an issue where the imagesReady event wasn't firing for me, but it seems like it was because I was loading all the images as background images instead of inline image tags.
I've created a web application with Cordova, I don't know what I'm doing wrong but when I try to resize my images it doesn't work, i have to reload the page to fire the callback function. the page:load and resize works well on desktop, the problem occur only with the first page. (on launching)
JS:
$(document).ready(function() {
var setheight = function () {
var bottomHeight = $('.bottom-fix').outerHeight();
var browserHeight = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;
var swiperContainer = browserHeight - bottomHeight;
$('.swiper-container').css('height', swiperContainer );
$('.slide-img-wrapper').each(function () {
var newSwiperContainer = $('.swiper-container').height() - 40;
var titleHeight = $(this).prev('.slide-title').outerHeight() + 60;
var imgHeight = newSwiperContainer - titleHeight;
$(this).css('height', imgHeight);
$(this).find('.slide-img').css('height', imgHeight);
});
};
setheight();
$(window).on("resize", setheight).resize();
$(document).on("page:load", setheight);
});
Html :
<%= javascript_include_tag "login-bookmark" %>
<div class="login-container">
<div class="popin-login">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img class='slide1-img' src="image1.png" />
<h1 class="slide1-title"> title1 </h1>
</div>
<div class="swiper-slide">
<h1 class="slide-title"> title2 </h1>
<div class="slide-img-wrapper">
<img class="slide-img" src="image2.gif" />
</div>
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="bottom-fix">
...
</div>
Demo :
When it's resizing (On page reload)
When it's not resizing (On app start)
Is there a solution to fire this callback when I start the app ?
I am using the swiper in the jquery version from idangerous. I load and initialize it with require.js like this:
define(['jquery','swiper'],function($){
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed:100,
// If we need pagination
// Navigation arrows
nextButton: '.m-stage-button-next',
prevButton: '.m-stage-button-prev',
});
});
});
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-button-prev"></div>
<div class="m-stage-button-next"></div>
</div>
(Those {{}} thingis are right now just placeholders)
Everything is loaded and rendered fine, but as soon as I try to swipe, I get
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
Any hints?
Instead of this:
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>
Try separating out your DIV's, with the swiper container on the outside:
<div style="width: auto; height: 300px;" class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
Check the quick start guide (point 3) for an example of the correct HTML markup for SwiperJS:
http://www.idangero.us/swiper/get-started/
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
In my case, it happens in this code/scenario (I use swiperContainer - HTMLElement - more than one time ==> logos in this example).
<!-- error code use logos twice -->
<div class="swiper-container logos">
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
var mySwiper = new Swiper('.logos', {
speed: 400
});
Throw this error:
Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos">).
I don't exactly know, what the failure was. I switched to Swiper 2.7.x and this worked without a single problem.
Seems like Swiper 3.x and Require with almond have some problems at the moment.
I am using the swiper from idangerous in an Angular 1.5 application. I got the same error when swiping slides with mouse, no error changing slides by clicking on arrows.
For me this was a timing issue. I solved it by moving the init of the swiper var mySwiper = new Swiper('.swiper-container', {... to where the view was done rendering.
The quickest solution for this is to remove the CLASS 'logos' and add it as an ID 'logos' to the same element. After that select the ID as the selector in your javascript file.
Eg: HTML
<div id="logos" class="swiper-container"> <!-- This line is edited -->
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
Eg: JavaScript
//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', {
speed: 400
});
This happened to me when i tried to use some code provided from a tutorial...I checked the official docs and used their example and it worked without problems
https://swiperjs.com/get-started