I'm using iDangerous Swiper library to display a mobile swipe touch gallery in conjunction with Jquery Mobile framework.
It works fine except that if I leave the index page (where the gallery is) and then come back, the pagination widget doesn't work properly. It still appears (I can see the bullets), and it's still clickable, i.e. if I "touch" a bullet the gallery swipes to the correspondent slide and the bullet becomes "active", but it doesn't work the reverse way, in other words it doesn't respond to slide changes: if I swipe through the slides the current active bullet does not update.
this is the initialization code:
$( document ).on( "pageshow", "#index-page", function( event ) {
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
});
The page are linked with jquery mobile's data-ajax="true" attribute to preserve the global scope.
It help me pagination swiper idangerous jquery mobile
$(document).one("pageshow", "#page1", function (e) {
var swiper = new Swiper('.swiper-container', {
paginationClickable: true,
hashnav: true,
pagination: '.swiper-pagination',
hashnav: true });
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
});
Issue:
Initializing the swiper twice.
Solution:
Define a global variable "swiper" outside the "pageshow" event. The global variable "swiper" will be "undefined" on loading the gallery first time. When you leave the page and come back, global variable "swiper" will not be "undefined". Then do not initialize again.
<script>
var swiper;
$(document).on("pageshow", "#page1", function (e) {
if (swiper == undefined) {
swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
}
});
</script>
Related
Our custom Owl Carousel isn't behaving as expected - while dragging and using keyboard arrows takes you to the next slide, the previous and next arrows jump 'over' the next slide to the one after.
The next slide does appear briefly but quickly flicks to the following slide.
I've tried a few things in the main.js settings but no dice. Any thoughts would be greatly appreciated as I'm a bit stumped.
main.js code is:
$(document).ready(function() {
// initialise owl
$(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
lazyLoad:true,
loop:true,
useMouseWheel: false,
nav: true,
center: true,
dots: false,
margin: 0,
stagePadding: 0,
URLhashListener: true,
startPosition: 'URLHash',
animateIn: 'fadeIn',
animateOut: 'fadeOut'
});
// click for next image
$(owl).click(function() {
owl.trigger('next.owl');
})
// add arrow keys to carousel navigation
$(document).on('keydown', function( event ) { //attach event listener
if(event.keyCode == 37) {
owl.trigger('prev.owl')
}
if(event.keyCode == 39) {
owl.trigger('next.owl')
}
});
// end arrow keys
}); // end owl
}); // end document ready
Happy to share any other parts of the code if it would be useful. Thanks in advance for any guidance!
With #Tiberiuscan pointing me in the right direction, I figured out a solution:
The click for next image part was targeting the entire owl carousel for clicks.
I modified this code to target the owl-item div and that resolved the issue, as below:
// click for next image
$('.owl-item').click(function() {
owl.trigger('next.owl');
})
Thanks again, #Tiberiuscan
I got a problem with swiper slider. I would like my swiper stop on mouse enter and continue on mouseleave. But my console shows me an error --> swiper.stopAutoplay is not a function, but the console log is displayed. And the same with startAutoplay. Does anybody know what am I doing wrong?
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
speed:2000,
autoplay: {
delay: 3500,
},
pagination: {
el: '.swiper-pagination',
},
});
(function($) {
$('.swiper-container').on('mouseenter', function(e){
console.log('stop autoplay');
swiper.stopAutoplay();
})
$('.swiper-container').on('mouseleave', function(e){
console.log('start autoplay');
swiper.startAutoplay();
})
})(jQuery);
</script>
In version 4.3.5 you must use autoplay.stop and autoplay.start. For example:
var mySwiper = new Swiper('.my-swiper');
$('.my-swiper').hover(function() {
mySwiper.autoplay.stop();
}, function() {
mySwiper.autoplay.start();
});
I'm running 5.1.0.
After console.logging swiper reference i saw that for each tab was specific one created.
So in the loop when i was hiding the tabs just needed to:
swiper[i].autoplay.stop();
And on tab click showing the tab:
swiper[i].autoplay.start();
So thanks to answer above by #nick i was able to get this running.
I'm combining some jQuery: Flexslider and Masonry.
Flexslider is triggered by global.js:
$(window).load(function() {
// Banner FlexSlider
$('#side-slider').flexslider({
animation: 'slide',
slideshow: true,
smoothHeight: false,
controlNav: false,
directionNav: false,
slideshowSpeed: 5000,
controlsContainer: ".flexslider-container",
});
}); // End on window load
The masonry is trigger in nwmasonry_init.js:
jQuery(document).on('ready', function() {
var $ = jQuery;
//Masonry
var container = document.querySelector('.overzicht');
var msnry = new Masonry(container, {
itemSelector: '.bedrijven',
gutter: '.gutter-sizer',
transitionDuration: 0,
});
});
On initial pageload, like can be seen here http://nieuws.ditisonzewijk.nl/category/brandevoort/ the slider on the top in the middle overlaps with another content block.
As soon as you resize the window, the slider resizes it's width and therefore the height of the slider is corrected.
Anybody have an idea on how to get the heigth of the slider right on the initial load?
You need to use imagesloaded.js. Overlapping is caused by masonry firing before all the images are loaded. Load the imagesloaded script and try this code:
jQuery(document).on('ready', function() {
var $ = jQuery;
//Masonry
var container = document.querySelector('.overzicht');
imagesLoaded(container, function() {
var msnry = new Masonry(container, {
itemSelector: '.bedrijven',
gutter: '.gutter-sizer',
transitionDuration: 0,
});
});
});
I've found a fix for this, even though it isn't pretty. I've put a delay on the masonry init.
function loadMasonry() {
***fire masonry***
}
setTimeout(loadMasonry, 500);
Now it's working correctly. Anybody an idea on how to fix this properly?
Here in the fiddle is more less what i want to do: http://jsfiddle.net/EUZS5/2/ .
I have different elements in a swiper and in some slides inside there is a draggable element.
Currently when i drag the arrow it also pulls the slide (which is not the behaviour i want:))
I tried to use 'stopPropagation' on drag event but it does not help to prevent the slide from moving.
Any ideas how to achieve this?
Im using hammerjs and idangerous.swiper.
$(document).ready(function(){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
})
var left;
$('.arrow').hammer({}).on("dragstart", function(ev) {
left = $(this).css('left').replace(/[^-\d\.]/g, '');
})
$('.arrow').hammer({}).on("dragright", function(ev) {
var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX);
$(this).css('left', distance+'px');
})
$('.arrow').hammer({}).on("dragleft", function(ev) {
var distance = parseFloat(left)+parseFloat(ev.gesture.deltaX);
$(this).css('left', distance+'px');
})
});
You can do this by adding some 'no-swiping' settings to idangerous swiper, and then adding that class when the arrow is dragged.
Fiddle here: http://jsfiddle.net/cspurgeon/EUZS5/3/
New iDangerous settings:
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
noSwiping: true,
noSwipingClass: 'no-swiping'
})
Relevant event listeners for arrow mousedown, and drag.
$('.arrow').on('mousedown', function(e) {
// disable swiper when user clicks on arrow
$(this).parents('.swiper-wrapper').addClass('no-swiping');
});
$('.arrow').on('mouseup dragend', function(e) {
// re-enable when user is done
$(this).parents('.swiper-wrapper').removeClass('no-swiping');
});
Note: you need the dragend because the mouse isn't always over the arrow when the user releases it. But you can't use dragstart because it appears to fire after the swipe event is triggered.
iDangerous noSwiping documentation here: http://www.idangero.us/sliders/swiper/api.php
I want:
autoplay: false when is width>900 in window size and ,
autoplay: true when is width<900 & width>701 in window size and ,
autoplay: false when is width<701 in window size
with jQuery flowslideshow and when the window is resized run this code
but notworking.
$(window).resize(function () {
var width = $(window).width();
if (width > 900) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
}
else if (width < 900 & width > 701) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: true**, clickable: false });
});
}
else (width < 701)
{
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
} });
The onResize event of the window does not always fire on page load, so the slideshow wouldn't autoplay in that case. It does appear to fire on page load in ie9.
Also, this code would recreate the slideshow every time the page is resized - which is probably not what you want either.
You might be better binding the slideshow on page load, and then binding an event to resize that pauses / resumes the slide behaviour. Like this:
jQuery(function($) {
// detect window size and init slideshow here
$(window).on('resize', function () {
// detect window size and pause or resume the slideshow
});
});
Without seeing the docs for the slideshow you're using I can't point you in the direction of exactly how to modify the slideshow after it's initialised, but it should be possible if you follow the principle above.
(On a side note, to check the resize event is being triggered correctly, you could console.log($(window).width()))
If you need more help, consider posting a Fiddle with the full example in it, and link to the docs for the slideshow plugin you're using.