This one has me stumped. I've used Flexslider with no issues many times, but with a site I'm building now it just refuses to work properly.
The last slide will show on load and stay visible until it has cycled through all of them, at which point things will start working properly.
I've tried all sorts of things, reducing it down, but can;t seem to figure it out. The only thing that changes this behavior is if I change the animation to slide instead of fade. But I definitely want fade. And I definitely want to figure out why this is happening.
It seems like it could be a CSS issue, but I can't find it.
Here is what I am working on:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/
EDIT:
I made a couple of super reduced test cases, with just basic HTML, the Flexslider CSS/JS, and jQuery being loaded, nothing else, and the bug persists.
With fade animation, has the bug:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/wp-content/themes/coppercity/test-fade.html
EDIT 2
I am an idiot. I changed the class name of the container from "flexslider" to "hero", but did not update the flexslider.css to reflect that. [sigh]
Thanks for looking.
user1910673 got it right!
the following CSS..
.slides li {display:none}
..fixed my fading issue!
I wish I could upvote but don't have 15 reputation.
I had this problem but it was not to do with my css. I found this article helpful:
http://processwire.com/talk/topic/2283-solving-the-annoying-flexslider-fade-delay/
It says to set "slideToStart" to your last slide. ie. If you have 7 slides then start it at 6. this fixed my problem.
It is not an ideal fix but it worked for my purposes.
EDIT:
Sorry, better fix was making sure that my slides had display:none
Then it doesn't matter what slide you start on.
so turns out it was my css.
Related
Out of the blue, EVERY browser shows the same problem. The left-most column is squashed and refuses to expand. It makes it impossible to edit the template options. Any ideas? thanks :-)
This looks like a glitch with Shopify and would be better addressed by opening up a support ticket with their support team
Note: If you shrink your screen width to 599px wide or less, the sidebar should expand to be 100% of the window width - this might help if you're in a pinch and need to make updates right now
I'm having a problem with Isotope.
Everything seems to work except that, when I filter the items, these are resized in a weird way, as if the items were resized relative to their old width instead of the container width.
I let you see by yourself here : https://codepen.io/anon/pen/RLPbpd (Click on the group of red buttons to see).
I tried to layout after each filter :
$iso.isotope('layout');
and to destroy isotope and then re-init, but nothing solved it.
My .grid-sizer is at the perfect size and all items have the same width..
I really don't know what could be wrong there, so I'd be very thankful if you could help me !
Sorry for my bad English, it's not my main language !
Problem solved.
The problem was due to
fitWidth: true,
in the initialization code of Isotope.
I just removed it and it works.
I am using the materialize css slider. The first slide works fine. When it moves to the next slide it stops adding the .active class.
I have the basic setup. What happens after the first slide is shown is that it doesn't move to the next one. Look at the image. Velocity stays buzzy on the first slide and never adds an .active class to any other slide anymore. Not even the first.
Does anyone have an idea why? It worked 2 days ago without issues. Something that i changed in JS must have broken this but i can't seem to figure out why.
Maybe somebody had this situation before? Hope you can help me out.
Cheers,
Victor
I found that VideoJS does not work in combination with VideoJS. Both use Slider class, and therefor conflicts occur.
If you are able to strip Slider from either one of the 2 then your good I guess. For me, ... it was way to much work so I downgraded to HTML5 native :)
I've got theme transitions (entrance and content with a set offset) on elements which overlap. The issue is as theme transitions are bought to the front of the page the elements which are animated unreliably overlap each other causing a nasty transition when it is returned to the correct z-index.
It doesn't seem to matter how the elements are structured in the visual tree or the z-index applied to the element, the issue still occurs.
Any help very much appreciated - Ideally I want to avoid writing storyboards though, I'm happy with the entrance/content transition in this scenario!
I ran into a similar problem myself. Here are some things you can try:
make sure the "correct" z-order observed at the end of the animation is indeed correct. Putting some label on your items should make that clear if the items have the z-order you intended
make sure the items are are added to the control according to their z-order. In case you use binding make sure the items you add to the collection are arranged by their z-index
in case you are using PrepareContainerForItemOverride make sure the logic around your binding is correct
Hope it helps,
Mihai
I decided simular problems with:
Position: Relative;
Transition: All... (All includes Z-Index)
I made Z-Index:4 and for "HOVERed" elements Z-Index:2000.
I have set up the Flexslider Carousel with thumbs on my website. For some reason, when I shrink it below a certain size it does not re-size properly and then it disappears (overflow: hidden could be causing this second issue) I freely admit that my java skills are limited, so I hope that someone here will be able to tell me what I messed up...
http://studiobilodeau.com/VLSB/slideshows/the_body2.php
Thanks for any help!
v
Try this, give your containing div (#container) width either in %, so that it adjusts as per your browser window or set its width for different viewports.