- This topic is empty.
May 21, 2012 at 1:33 am #38153
I’ve implemented Anything Slider on a new website I have just launched (link below to the full test site)
which incorporates three separate panels, each of which has an embedded vimeo video (positioned to the right), and image and a link tag (positioned to the left) wrapped in divs. I should also point out that I have set up the slider not to build any of the navigation or buttons and have autoplay turned on. This way the slider panels automatically fade through the three panels and only stop when the cursor hovers over a panel, or a video is being played. The slider is working fine except for one unusual issue.
When the page first loads and the cover image and player controls for the first video appears if a user tries to click the play button two things happen 1. The play button’s normal hover functionality doesn’t work (it doesn’t turn red) and more importantly it results in the video in the third (and final) panel in the slider playing and not the video in the first panel. What the user expereinces however is the sound from the third video playing but no change to the first video (i.e the cover image continues to be displayed). The user only realises that the third video is in fact playing if they move there cursor away from the slider allowing the slider to display the other panels in succession and finally reaching the thrid panel.
If however the user lets the slider complete one full turn all the videos play normally.
I believe what is happening is that the the video in the last panel is being loaded first and the first video last. So when the user clicks on the first video’s play button it is not fully loaded (indicated by the fact that the play buttons hover styling in not functional) but the last video is and because all the video’s x and y co-ordinates are the same?? this results in the video that has been loaded in playing.
To fix this I have looked into pre-loaders that will work with anything slider so I can try to load a temporary image of the first panel till all of the elements in the slider has fully loaded but without success.
2. This didn’t have the desired effect but didn’t adversely affect the sliders functionality so I added the (window).load in the hope this would require all the elements to be loaded before the anything slider script would run. That doesn’t seem to be the case.
Mottie, if you or anyone else can help me with a solution to this issue or even point me in the right direction to a solution I would be very grateful. My apologies also for the length of this post.
Thanks in advance.
PeteMay 21, 2012 at 10:34 am #103191MottieMember
It sounds like the clone of the last video (located left of the first panel) is automatically playing. Are the videos set to autoplay?
Try switching the “infiniteSlides” option to “false” and see if the problem goes away.May 21, 2012 at 11:06 pm #103234
Thanks for responding to me. Just to answer your question, no the videos aren’t set up to autoplay and if the user lets the slider cycle through to even the second panel the slider functionality seems to be working fine (i.e the hover functionality on the video play button works normally (changes color) and more importantly the correct video plays when the play button is clicked. If the user lets the slider cycle through one full turn the video in the first panel also plays correctly. The issue only seems to present itself when the first panel has not had a chance to cycle through to the second panel.
I also tried your suggestion of adding “infiniteSlides: false” to the slider options without any improvement. To make sure the other changes I had introduced (as mentioned in my first post) weren’t conflicting with infiniteSlides change I took them out in successive steps, also without any improvement.
Can you think of anything else I could try?
Thanks again for your help.
PeteMay 28, 2012 at 10:02 pm #103590
Anymore thoughts on this issue I’m having?? It would be great if you can take another look at this for me.
PeteMay 31, 2012 at 8:29 am #103717