I'm trying to get Flexslider to work on the following page — http://www.mattpealing.co.uk/_concept/fddds/dev/ — but I can't get it to animate properly for the life of me.
It seems to be loading all the js and css scripts properly, and I can see the inline styles have been applied to the elements in the DOM.
It's just getting the thing to actually move is the problem I'm having. Here is my script:
$('#feed-testimonials-home .feed').flexslider({
animation: 'slideLeft',
slideshow: 0,
slideshowSpeed: 150,
animationSpeed: 500,
keyboard: 0
});
Can anyone see what I'm doing wrong?
Figured it out in the end — slideshow: 1
Related
I'm using flex slider in my html .
I have followed given steps to add slider in my html page.
Slider works well When animation = "slide" But
Not working properly when animation = "fade" ;
Fade effect does not show proper slides .
here is my script:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationSpeed: 1000,
direction: "horizontal",
slideshowSpeed: 2000,
pauseOnHover: true,
slideshow: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Help me out.
thank's
Sounds like something with the CSS. I would create a fiddle so people can see your code and also explain exactly what you mean by "Fade effect does not show proper slides". What happens? Anything?
If you do that then I'm sure you'll get it figured out on here...
I had the same problem. Animation: "slide" worked fine but when I tried to use "fade" I wasn't able to click the thumbnails to change the slides. There is nothing wrong with the flex slider or the javascript. It works great in the flex slider demo, so...
Try fiddling with the positioning/layering of the <ol>. The thumbnails are probably layered beneath the main slide image, making it impossible to actually click them.
This worked for me:
ol.flex-control-thumbs {clear: both;}
But you can also try playing with positioning and z-index if clearing doesn't work. It's going to depend heavily on how your HTML and CSS is structured. If that <ol> thumbnail list can wiggle it's way underneath the slider, it will. And nobody likes not being able to click stuff!
In my case, solution was simple.
Thumbnails work well, but its "under" the slides. Just set .flex-control-nav with high z-index.
.flex-control-nav{
z-index:500;
}
Should work.
I'm having a problem fading in and out text with jQuery in IE8.
I'm using FlexSlider (WooThemes).
Plus... I also would like to stop the fade on the background image (after slide 1) if possible.
Here's my test site.
jQuery Code
jQuery(window).load(function(){
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: false,
touch: true,
slideshowSpeed: 10000,
startAt: 0,
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(slider){
jQuery('body').removeClass('loading');
},
after: function(slider) {
jQuery('#backgman').stop("fade");
},
end: function(slider){
// $('#result').load('form.html');
// window.location = "template-form.html"
//alert('Ready was performed.');
}
});
jQuery('#slide-text').css({zIndex:7}).fadeOut(0);
jQuery('#slide-text').css({zIndex:6}).fadeOut(0);
});
I have an IE8 css file and have used opacity:inherit; filter:inherit;
I think I'm really close to getting it... any ideas/suggestions?
Let me know if you need any additional information.
You must to remove div which you have used in "UL" tag and set float:left in your li style.
It should be like this,
<ul>
<li style="float:left;">...</li>
<li style="float:left;">...</li>
</ul>
For, example, take a look at this link where it was working fine.
Hope, this one will help you!.
I'm not sure whether this is a css or JS issue. I have installed the flexslider plugin' which seems to have been installed correctly however I have a problems with the flexslider carousel, code posted at github. My sliders are playing in descending order, i'm not quite sure why or how it's doing this... below is the Jquery in corresponding JS
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
slideshow:true,
directionNav: true,
minItems: 1,
maxItems: 1,
controlsContainer: false,
manualControls: '.custom-controls li',
start: function(slider){
$('body').removeClass('loading');
}
});
});
My Example Site
Maybe you are overriding flex-slider CSS from your own CSS? Maybe you have floated flex-slider's contents (image, div or what ever) to right or reverse direction? If so try to fix that :)
I have tested this after seeing your post. So I changed flex-slider inline float:left to float: right and now I get last slide as first slide and all slides are reversed.
It's a bug in Flexslider 2.2.2.
Downli
https://github.com/woothemes/FlexSlider
One of my websites throws up an error about the javascript not being defined when I view it in IE7.
After a bit of research, I think its something to do with the Doctype I am using, as I am using the HTML5 Boilerplate. This shouldnt cause a problem though right?
Can anyone tell me why this is happening and how to fix it? The website is: http://njbuildingandmaintenance.com
And here is the menu script I am using (the error isnt replicated on this page...) http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
Thanks
In your file "script.js", there's a stray comma at the end of an object literal.
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
slideshow: true, //Should the slider animate automatically by default? (true/false)
slideshowSpeed: 7000, //Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600,
keyboardNav: true, //Allow for keyboard navigation using left/right keys (true/false)
touchSwipe: true, // <---- HERE IS THE ERROR
});
});
Get rid of that comma.
so I have a little issue with my jQuery Captify (Caption on image rollovers) and Quicksand (Image filtering system) not working so well together. When the page loads, my Captify works well when I roll my mouse over the images, however as soon as I click a link to filter my thumbnails, the captify script stops working.
I tried to call the captify script every x seconds, but I'm either not doing it correctly or it's just not the right solution. Can anyone help me out? The site can be found at http://www.galaxyturbo.net/new/index.php
If you have Firebug or similar developer tools like in Google Chrome, you can take a look at my code from there, I just didn't want to perhaps spam this page. Thanks SO much in advance if you can help me out here, I'm really desperate.
Well, I would say we both need to learn more JavaScript, but I had the same problem, and here is how you make it work :
What you need to do is RECALL THE CAPTIFY FUNCTION AFTER THE QUICKSAND CLONNING !
so look for the JS code for quicksand, look for :
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
that should look like this :
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
},
// RECALL CAPTIFY ===============================
function() { $('img.captify').captify({
speedOver: 'fast',
speedOut: 'normal',
hideDelay: 500,
animation: 'slide',
prefix: '',
opacity: '0.7',
className: 'caption-bottom',
position: 'bottom',
spanWidth: '100%'
});
}
// RECALL CAPTIFY ==============================
);
return false;
hope that helps !
also, you will have to do the same with other scripts, like LightBox or PrettyPhoto .