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
Related
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
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.
This problem is plaguing me. I've used jCarouselLite for years and years, I even added a "fade" feature to the original library released by Ganeshji Marwaha for my own use. I recently switched to the new plug-in because it is still supported, it uses touch events, and it can be responsive. But I have had no luck in using it.
I am almost certainly doing something stupid, but I can not figure out what... Can anyone take a look with fresh eyes at this homepage implementation?
http://staging.tbc1927.com/www/
The implementation here is not responsive, but I would like swipe supported.
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
The CSS is simple enough, and I am letting the plug in do the heavy lifting. The jQuery I am using is the same as they recommend (1.7.2), though I had been using a newer version as well with no luck (1.8).
When the carousel initially loads, the first slide is fine. Then it goes away, and the whole carousel is positioned WAY off the page. The longer the carousel runs, the more off the page it is positioned.
What am I missing?
The author of the plug in helped me out here. The plug in changed the "auto" option to a boolean value, and the "12000" value was throwing it off. To set the animation delay, the plug in now uses a parameter called "timeout". The correct implementation script should be:
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: true,
timeout: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
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!.
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.