http://spacedout.co.uk/spaced_out_architects_architecture_portfolio
The slider transitions fine until it gets to slide 20 to 21 and above increments when for no apparent reason it seems to slide through all the slides again. It still ends up on the correct slide however.
Does anyone have any idea why it would be doing this?
It uses the (wordpress) wp-coda-slider plugin, I just can't work out why it does this after 20 slides. I've tried using different transitions and time intervals and it makes no difference. Has anyone had this problem before or know where to look to try to find out why it's doing this?
Much thanks
Dom
It slides all the images, but when the slider runs out of images, the next transition returns you to the first image, but with the same transition time as the ordinary image sliding.
You might want to try something like this: Infinite Carousel
Related
I'm experiencing a very weird chrome (45 and 46 windows only) behaviour with css3 transition using fullpage.js
The transition "freeze" 80% of the time when I'm going from the first to the second section of a website. And then, everything work fine.
Take a look by yourself :
first you will need to login as the website is still under construction.
Http://www.evandorlot.com/wp-login
Login : Guest
Pass: Luckyone
then, come back to the home page www.evandorlot.com
Sroll down, here's the bug. From the first to the second slide of the website, the transitions "freeze" they pop instantly to their final stage.
After pressing ctrl+f5 and trying again, sometime it work, sometime no... it seams to be a chrome bug as it work 20% of the time. But I would like to fix it somehow. For this I need to know what cause the issue.
I'm working on this bug for more than a week now and don't find any solutions:
I tried to disable all the TweenMax animations, then all the css3 animations that are not vital. I also disabled all my custom javascript expet fullpage.js function without any configuration, I tried removing the image from the second slide, deleting the second slide, swapping the second slide with another, replacing the image, the text, deleting the diamond icon, deleting the menu on the bottom right corner, actiavating GPU acceleration by adding CSS3 translateZ to each elements that is animated on the first and second slide... Nothing fixed the bug.
The only way to make it working properly is to empty ALL the content from the second slide and leave the entire section empty. So I guess something cause the issue, but I really don't know what.
I know it's a long shot but if anyone has already experienced similar bug or has a suggestion to fix it. It will be very useful as I'm totally desperate :)
Right now I have a flexslider with four slides. The third slider is a gif rather than a jpg like the others.
The issue I am having is that this third gif slider apparently starts immediately when the page is reached as opposed to when you actually get to that slider. By the time one clicks through the first two sliders, the gif is just about finished.
Anyone have any idea as to how I would begin a GIF only when one reaches that
slider?
I finally found the solution for you after one hour of test, add the before function to your declaration code, and change the src of next img to empty and back to the original src do the work, like bellow :
JS :
this code will init the gif just before the display.
$('.flexslider').flexslider({
animation: "slide",
before: function(slider){
var src = $(slider).find('.flex-active-slide').next().find('img').attr('src');
$(slider).find('.flex-active-slide').next().find('img').attr('src','').attr('src',src);
}
});
Its work perfectly for me.
See JS Fiddle (you can notice that the counter in gif always start by 10, without before function you find that the counter is already start), hope that help.
As far as I know, it's not really possible to pause/stop/play GIF animations using code.
The workarounds I know of are...
Some browsers won't start the GIF animation until the element is actually visible on the screen, so you could hide the image until the slide is active and then $('#MyGifImage').show(). You'll need to test how this behaves in various browsers, however.
As suggested in this question you could create image sprites instead of an animated GIF.
Have you tried either of those methods?
I found this beautiful website (http://soworldwide.org/) and want to create a similar slideshow. After I've spend a lot of time to make it work, I still can't figure it out.
Right now it's looking like this:
http://bit.ly/1bktxcx
Wait undtil the last picture and then you can see how the slideshow refreshes. Can someone help me, so I get the same animation like theirs?
I'm using the same Jquery Plugin by the way.
Thank you in advance.
You're setting the top of the list-begin image to zero at the same time that you're starting the animation for the list-end image. Because the zIndex of the list-begin image is 3, you're causing the list-begin image to hide the animation of the list-end image. I recommend dynamically updating the zIndex for each image when you do the animation. For slides that are hidden (by setting the top to a negative value, as you're doing), you can ignore the zIndex. But before you set the top to zero for your next image, set the zIndex for curr to 1 and the zIndex for next to 0.
Edit: I figured this out using the Chrome JS debugger and liberal use of console.log(). Maybe you did all the right things and still couldn't find the problem, and just needed a second set of eyes. But if you didn't do all the right things, remember: the debugger is a powerful tool.
Hi to everyone this is my first ask on stackoverflow
I've created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97x89/5/
If I click on "gestione news" all the menu elements will slide left with different delay
and an image (that on jsfiddle u can't see) with the text "Articoli" will appear.
So i click on the image and the text "articoli" will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.
I don't that the problem is in the delay() functions but in the $.each(), maybe I'm wrong.
Can someone help me with this.
Thank you in advance.
The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:
$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");});
I am not sure why they are still running, but you can stop them before running new animations like this:
$(this).stop().animate({"marginLeft":"0px"},"slow");
This seems to fix the slowdown issues that you are experiencing.
Put your menu in a div. Instead of doing a foreach on each element, animate the main div.
Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.
Can anyone help me with this simple bit of jQuery? I am building a carousel that features many sliding <li>s. Each one has a short description accompanying it, which I want to fade out when the carousel slides, and fade in when the carousel stops at another <li>. The problem is that when the carousel controls are clicked rapidly, the fades take a while to catch up. Also the current simple fadeIn/Out option doesn't work well when clicking to an <li> much further through the carousel (from the small grey discs underneath infographic). I've tried a few options but I'm not really getting anywhere.
The page is here: http://weaver-wp.weavertest.com/radiation-infographic/
Thanks for any help :)
David
The trick is to stop the operation before you start the next one:
http://api.jquery.com/stop/
bottom line, you stop all previous animations before you call in the next one. This avoids building up a queue of animations.
Use clearQueue before calling fadeIn/fadeOut