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.
Related
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,
})
When i use two flexslider instance manual control of second flexslider affect first slider
enter code here
this.contentTabs.each((index: number, element: Element) => {
var slider: JQuery = $(element);
$('.flexslider', element).flexslider({
animation: "fade",
overflow: "hidden",
slideshow: false,
smoothHeight: true,
directionNav: false,
selector: '.content > .panel',
controlscontainer: ".flexslider",
manualControls: " .tabs >.tab",
})
;
Are both sliders using the same class? Then it makes sense that the controls react to both sliders. If you want them to not interfere with each other use a different class for each individual slider. (".flexslider1", ".flexslider2" for example.)
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.
In the Sencha Touch Charts 2 beta distribution, the Drawing guide example code has an example of a Sprite listening for touch start. The code given fails to draw any sprites, because it fails to insert a canvas onto the DOM. However this can be fixed by replacing this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
items: drawComponent
});
with this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
chart: drawComponent
});
Now, I'd really like to get the event handling to work. The example code continues with:
// Add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
// Remember always to refresh the image
drawComponent.surface.renderFrame();
// or animate an attribute on the sprite
// no need to refresh the image when adding animations.
myCircle.fx.start({
fill: '#555'
});
// Add a touch listener to the sprite
myCircle.addListener('touchstart', function() {
alert('touchstarted!');
});
but that final alert never happens on touch. Any ideas?
drawComponent.addListener('touchstart'... works fine, but is of course not localised to the circle sprite.
--- after more investigation ---
I think the answer is simply that event handling on sprites his not implemented yet. e.g. in touch-charts/src/draw/engine/Canvas.js we have in the definition of Ext.draw.engine.Canvas,
getSpriteForEvent: function(e) {
return null; //TODO!!!
},
OK - time to change the question from 'how?' to 'when?':
'When will Sencha Touch support Sprite event handling?"
I have two circles, one is small (thumb) another one is big (info), and when the user hover over the small (thumb), then the small icon need to resize in to big one. I also need to show the new information in the big. I think I have to do this by width and height animation, because small is 100px X 100px, and big is 200 X 200 size.
Please advice on the best way to do this. I would like to avoid using plug-ins.
using jquery 1.4.2 or up, you can achieve this by using:
$(".smallCircle").hover(
function () {
$(this).animate({
width: '200px',
height: '200px'
}, 200, function() {
// Animation complete.
//do whatever
});
},
function () {
$(this).animate({
width: '100px',
height: '100px'
}, 200, function() {
// Animation complete.
//do whatever
});
});
put the class "smallCircle" in the small circle.
P.S. in each state of the hover, you can control what happens after the animation is done (the place where I put "//do whatever"), that's the place where you could insert the content of the big cicrle.