I'm using a basic swiper with no option. Then I have a listener for "mousemove" in the body of my site. I did this to build a mouse follower effect. This works well, but when I start to drag a slide, it seems this event will not arrive anymore and my custom div "used for mouse effect" does not move.
I finally found a solution in the api! You can set touchStartPreventDefault to false:
this.mySwiper = new Swiper(".swiper-container", {
touchStartPreventDefault: false
})
Look for the Touches section in the #Parameters
touchStartPreventDefault: false
causes firefox swipe bug.
You can use pointermove instead of mousemove.
Bro after full day of testing this is what finally worked
const slider = new Swiper(e, {
slidesPerView: 'auto',
direction: 'horizontal',
speed: 200,
loop: true,
touchStartPreventDefault: false,
allowTouchMove: true,
})
Related
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
I made custom feature to stop auto play when user hover on swiper. It is working but there is a problem. It won't stop immediately, instead of it has delay time = swiper's speed. How to stop it immediately. Please help me.
swiper.hover( function() {
swiper.autoplay.stop();
}, function() {
swiper.autoplay.start();
} );
I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
I have an Ext window that is created from the desktop example, like this
win = desktop.createWindow({
id: 'main',
app: me.app,
border: false,
closable: true,
maximized: true,
maximizable: false,
width: winW,
height: winH,
layout: 'fit',
items: [{
...
}]
});
Now just at the moment this window shows, another one should be shown for configure purposes, the problem that I have is that when this second window shows it aprears in the back of the main one.
This is how my configure window is created in the 'Main window' render event
me.confWin= new Ext.window.Window({
id: 'configWin',
layout: 'fit',
width: 290,
height: 165,
modal: true,
draggable: false,
resizable: false,
items: {
...
}
});
Then in the show event of the main window, i have this
this.confWin.show();
this.win.toBack();
I have tried placing this in different events like afterrender, afterlayout, activate and still the confWin is shown in front and then placed in the back
After a little analysis, I found that when my main win is created it has a z-index of 19010 (example), the confWin has a z-index of 19021 when I call confWin.show(), but after that I don't know why, they just change their z-index and one has the index of the other.
Also I tried editing the style with Jquery just after the confWin.show(), but again the z-index changes.
Thanks for your help
Edit
I tried to show the window on a button click and it works like charm, but if I fire the click event when I want the window tobe shown, it doesn't.
Any ideas?
You should be able to handle this in the show event.
winMain.on('show', function () {
winCfg.show();
});
I mocked up an example in JSFiddle to show that it works properly.
I use the "FLexslider - Jquery" plugin.
I don't like it when animationLoop is true and it reaches the end of the slides, it does a quick scroll to the start. I would like it to instead keep a continuous loop. I did NOT see an option for this.
Can anyone help me?
Based on the date of your post, can we assume that you're using Flexslider2? If you are, the option animationLoop should already be set as TRUE and should clone your first and last slides so it will always loop instead of "reset" back to the beginning. Can you paste your code on what you have and lets get going from there.
Ex:
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
animationLoop: false,
video: true,
controlsContainer: '.flex-nav',
manualControls: ".flex-nav_tab li",
start: function() {
console.log('changing slide')
}
});