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.
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 am trying to create the ability for users to see the product rollover image on click the arrows on image.
Basically image will toggle on click of the side arrows on image.
Is their any js library or script available that allows to achieve this functionality ?
Thankyou
It seems like you are looking for swiper.js.
The setup is really easy:
include this in the head of your document
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
than add your images to the swiper-slide elements
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Image 1</div>
<div class="swiper-slide">Image 2</div>
<div class="swiper-slide">Image 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>
set the desired size
.swiper-container {
width: 600px;
height: 300px;
}
and finally initialize it within a script tag
<script>
var mySwiper = 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>
all of this is really well explained in the guide
Using Slick.js.: I would like a gif animation to start only after its containing slide is shown.
I suspect this is very basic, and event names such as afterChange — referring to slides — shown in the official slick.js page, make me assume they're meant to achieve goals like mine? Just wondering... If so, how do I use the events? If not, can you suggest a way to do it? Oh... my JS is not very good, please take that into account. Thanks all!
<li id="xprmntl_one">
<div class="grid">
<img src="../PROJIMGS/XPRMNTL/animation/grid.png">
</div>
<div class="design">
<img src="../PROJIMGS/XPRMNTL/animation/design.png">
<img src="../PROJIMGS/XPRMNTL/animation/top_elements.png">
</div>
<div class="browser_animation">
<img src="../PROJIMGS/XPRMNTL/animation/layout_animation.gif">
<img src="../PROJIMGS/XPRMNTL/animation/browser_&_alpha.png">
</div>
</li>
$('#xprmntl_one').slick({
dots: false,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: false,
prevArrow: '<span style="display:block" class="navItemCointainer left"><span class="slick-prev navItem"><</span></span>',
nextArrow: '<span style="display:block" class="navItemCointainer right"><span class="slick-next navItem">></span></span>',
});
A simple way to do it would be to use a custom data- attribute on the slides that contain GIF images. Here's an example using the beforeChange event to check if the next slide's image is a GIF:
$(function() {
$("#carousel").slick().on("beforeChange", function(event, slick, currentSlide, nextSlide) {
// Use the "nextSlide" variable to find the <img> in the next slide
var nextSlideImg = $("#carousel [data-slick-index='" + nextSlide + "'] img");
// Check if it has a custom "data-gif" attribute
if (nextSlideImg.attr("data-gif")) {
var gifUrl = nextSlideImg.attr("data-gif");
// Set the placeholder image to the .gif so it plays from the beginning
nextSlideImg.attr("src", gifUrl);
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<div id="carousel">
<div><img src="https://via.placeholder.com/400x300?text=Img 1" /></div>
<div><img src="https://via.placeholder.com/400x300?text=Placeholder" data-gif="https://i.imgur.com/T3bOme7.gif" /></div>
<div><img src="https://via.placeholder.com/400x300?text=Img 2" /></div>
</div>
Parallax content slider works once, but then fails to work, without any error. here is the example http://vilamihu.didacticmedia.ro/ , and here are the important bits of code:
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--end slider -->
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Those are in <head>. Here is the body:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img">
<img src="images/slideprimu.jpg" alt="" class="class1" />
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide1.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide2.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide3.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide4.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide5.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide6.jpg" alt="" class="class1"/></div>
</div>
<!--/slide -->
</div>
and here is the jquery:
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
interval: 500
// time between transitions
});
});
Note: the links to photos are good. if I change the "current" setting, then it will start at that photo, go once, and stop. Any ideas will be greatly appreciated! Thanks!
Try this
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
intervalSec: 500
// time between transitions
});
});
I have just changed name of value interval to intervalSec
as per the documentation other things should be okay
Also in the provided link of website you are using older version of jQuery v1.8.3
If possible update it to latest version CDN, as for CSS3 newer version works better(Note: which does not support some old browsers)
Update: In the given website Link there are two JQuery UI of different versions used
jQuery-UI 1.9.2
jQuery-UI 1.9.1
Please remove the older version(the js/jquery-ui.min.js) to avoid any conflict..
today I was trying to solve exactly the same problem.
Even though this answer is probably not required anymore, I will add it for further coders that will encounter the same problem.
The root cause is in bgincrement value. If there is no background that it can "move" it will stop responding without any error. And its total mess.
Setting bgincrement to zero made the slider work again:
$(document).ready(function () {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 0
});
});
I had the same problem... please deactivate all other jquery plugins, let only the slider at place. Do not forget to delete the initiation codes in your custom js file or in your html file as well ! Normally your slider works online after all.
Then you can re-add your plugins step by step and you will recognize with which plugin your slider has incompatibility. I had jQuery Timelinr 0.9.54 plugin which blocked my slider.