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).
Related
slick.js carousel won't initialize in second tab. When I open the second tab the main video does not show until I click the dots.
I tried using $(videoSlider).slick('setPosition'); and also added .each function which does work but not if sliders are in the tabs. If I have numerous carousels on a page they function prooperly. It is only when put in tabs it does not work.
// initialize slick sliders
$(videoSlider).each(function() {
$(this).slick({
arrows: false,
dots: true,
infinite: true,
speed: 500, slidesToShow: 1,
slidesToScroll: 1
});
});
Carousel will work in tabs as it does when out of tabs
An issue that stands out is in your selector for videoSlider. This needs to be a string value and should most likely be '.videoSlider' to match a class used in your markup.
You may also run into an issue if you initialize a slideshow while it's hidden in a tab. In this case, Slick has trouble determining the slide width and assigns a width of '0px' to each slide. You can overcome this issue by refreshing your slideshow when you reveal your tab's contents. For instance, if your slideshow has id="slideshow1":
$("#slideshow1").slick("refresh");
More information about the hidden slideshow issue: https://github.com/kenwheeler/slick/issues/235
I have a jQuery UI accordion of which I need to urgently change the speed/duration of the animation before the site goes live.
$(".faq-accordion > div").accordion({ header: "h4", collapsible: true, active: false, speed: "fast", });
Editing the speed in this line doesn't affect anything.
See JSFiddle for full code.
The show all/hide all buttons open the accordion at a much faster speed than when they are individually clicked.
I need to speed up the animation of the accordion so both are the same speed if possible.
If you take a look at the accordion API you'll see that there's no option called speed, you need to use animate. The equivalent to a duration setting of fast for slideUp and slideDown, in milliseconds, is 200, so you can just use that as a number value:
$(".faq-accordion > div").accordion({
header: "h4", collapsible: true, active: false,
animate:200
});
Here's your fiddle updated with this: http://jsfiddle.net/z3Lx1o0y/
You can specify the speed at a more granular level in the slideUp/slideDown function
e.g.
$('.applying div div').slideDown(1000);
Try tweaking this.
I am using jquery ui tabs. I want to apply sliding content effect when switching between tabs i.e on showing and hiding of the tabs content. Here is my DEMO
I'm trying to slide the tab divs with the content in them when I click on the navigation above it all. So Nav link 1 would slide the content of #tabs-1 in front of the screen, etc.
The script I have currently, which has no sliding functionality is :
$(document).ready(function () {
$('#tabs').tabs();
$('.sub-nav a').click(function () {
$('.sub-nav li a').removeClass('subnav-active');
$(this).addClass('subnav-active');
});
});
I've tried to do slideToggle, as well as just a fading out and fading in effect, but couldn't get either to work. So i'm reaching out for some assistance, even if all it is, is somewhere to look, that would be greatly appreciated since i'm not the greatest at javascript or jQuery.
jQueryUI has effects built in. No need to roll your own.
http://api.jqueryui.com/slide-effect/
http://jsfiddle.net/isherwood/9jg4r/4/
$('#tabs').tabs({
hide: {
effect: "slide",
duration: 1000
}
});
Here's an example with show and hide effects: http://jsfiddle.net/isherwood/9jg4r/5
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 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