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.
Related
I used slick slider in tabs. In first tab slides are work good. But when we clicked on second tab - slider disappears.
https://codepen.io/malinosky/pen/jvgqxO?editors=1010
I used
$('.js-photo').slick("setPosition", 0);
$('.js-presentation').slick("setPosition", 0);
But that's don't work for me. What's my mistake?
Because when the slider is hidden, it has a height of 0.
So you should refresh the positioning of slick when the slider is visible:
target.fadeIn("200", function() {
$('.js-photo').slick("setPosition", 0);
});
Example: https://codepen.io/anon/pen/jvgVqR
I've found a solution through CSS and it's working well at mine.
You could set the not-active tabs to
overflow-y: hidden
height: 0
instead of the classic
display:none
Reference link :
https://github.com/kenwheeler/slick/issues/341
Thanks
You can set onClick function on the tabs (by class) or one tab (by id) like this
$("#tab1").click(function(){
$('.carousel-1').slick('refresh');
});
be careful on the tab and tab-pane
reference Github
The codepen demo missed an initial setPosition of original codes.
I've also forked a codepen demo:
https://codepen.io/RobJS/pen/zJgojN?editors=1010
autoplay: false,
autoplaySpeed: 2000,
fade: true,
arrows: false,
**lazyLoad:'ondemand'**
Use lazyload and wait 2 seconds after clicking (codepen takes this time to update).
I am having an issue with some jQuery animations. I managed to make my flex sidebars slide in great but I am having some issue with the slide out effects. The slide out function is making the sidebars instantly vanish.
Also, I believe I need the hide() and show() functions because with just min/max-width the sidebars make the flex canvas very tall.
My slide out functions:
$('#close-left').click(function(event){
$('#left').animate({
'min-width': '0px',
'max-width': '0px',
}, 1250).hide();
});
$('#close-right').click(function(event){
$('#right').animate({
'min-width': '0px',
'max-width': '0px',
}, 1250).hide();
});
I made a quick fiddle that is producing the same issues: https://jsfiddle.net/89s5tsLr/
Update: I made a second fiddle showing how the right sidebar causes the flex canvas to be way too tall without the hide() function being called.
https://jsfiddle.net/soq6webp/1/
Thanks in advance for the help =)
remove the .hide()
That's what instantaneously making them disappear and messing up your animation.
--
EDIT: After our exchange in the comments I came to the conclusion that given your circumstances, you may not be able to do what you have in mind, so instead what you can do is:
Slide out animation first
Then show the content
$('#right').show().animate({ css to change here }, {
duration: 1250,
complete: function() {
// once animation is over, run all the code in this block
}
Check out this JsFiddle
The 2nd object passed to an animate function is options and one of these is complete which call the code once the animation is over.
So we animate the text in this anonymous function so that it's called once the animation on the #right div is over.
We do the same on the close button except we hide away our text first, then slide away the div.
(note the changes in the CSS as well)
I use mixitup for filterable Portfolio
Here is demo preview - link
Here is mixitup options:
$(function() {
// Instantiate MixItUp:
$('#portfolio-container').mixItUp({
animation: {
animateResizeContainer: true,
duration: 1000
}
});
});
Well, I'd like to make content move smoother. When there are less images, everything under #portfolio-container are pushed to top so instant without smooth animation.
So my question is: how to make it more smoother?
Here is an example, footer are pushed smooth to top when there are less images in grid.
Problem solved. It works in normal project, probably in codepen it is broken.
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
I have a wordpress template that makes use of Coda Slider 1.1.1, and although I have figured out how to make it transition less frequently, I can't figure out how to change the physical speed at which the elements slide across the screen. I'm looking at the coda-slider.1.1.1.pack.js file but can't see it in there...
If you are using Coda slider 1.1.1 pack js.. You can use this code to auto slide :
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider({ continuous:true})
jQuery("div#slider2").codaSlider()
// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
var autoSlide = setInterval(function()
{
jQuery("#stripNavR0 a").click();
}, 6000);
});
Instead of #stripnavR0 a use the id for the div use on right click of your slider.
you can adjust the slide speed with that:
$().ready(function() {
$('#coda-slider').codaSlider({
autoSlide: true,
autoSlideInterval: 4000,
});
});
Cheers,
Stefan