I have a one item carousel set in this way
owl.owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:5000,
autoplayHoverPause:true,
autoplaySpeed: 1000,
dotsSpeed: 1000
});
When I go from 1 to 2 (or between any two points lying next to each other) the transition delay 1 seconds (expected) but when I go from 1 to 4 the transition takes much more time.
I want the transition speed to be always the same (1s) regardless the distance of the points.
To clarify, when it is in dot 1 and I move to dot 2, I want the element in slide 2, delays one seconds in showing , and when going from 1 to 4 the element in the slide 4 delays one seconds in showing too.
Here a jsfiddle example
Note in the jsfiddle I put a span.test that has a 1s delay animation so when the slide move in auto play or you go from 1 to 2 just when it finished the transition, the span.test appear but when you go from 1 to 4 the span.test arrive already showing.
I will be grateful if you can help me
Related
could you please help me to understand how to make slider I see in "our menu" section of https://livedemo00.template-help.com/wt_61177_v1/#undefined6 site with an infinite loop and same functions.
The exact slider you are looking for is a Slick Auto play slider which is just the auto play version of the example you have. Example code.
$('.autoplay').slick({
slidesToShow: 5, //The amount of slides to be in view at any given time
slidesToScroll: 1, // The amount of slides to scroll on click or auto scoll
autoplay: true, // Sets the slider to automatically slide through the slides
autoplaySpeed: 2000, // The interval between sliding between slides
});
Example image of slider on slicks website:
I have given some margin top to my slick-center class.I want the slick slider to scroll 3 slides at once.These are my slider settings :
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".center").slick('slickSetOption', 'slidesToScroll', 3, true);
});
As slidesToScroll does not work with centerMode ,I'm using slickSetOption to force it to work with scrolling three slides at once.
The issue: This slick-center styling works perfectly fine when the number of slides in my slider are in multiples of 3.But whenever the number of slides are 4,5 .. or any non three multiple,the slick slider doesn't append the correct slide with the slick-center class.
This is my codepen :- https://codepen.io/shivanit2/pen/zLwzbR
Currently there are 8 slides in my codepen,and you can see how its not giving the correct styling .(if you scroll on the third slick-dot)
If you increase 1 slide,it will work perfectly.(multiple of 3's)
How can I resolve this issue?
I use owl-carousel with these options:
jQuery('.my-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplaySpeed: 3000
});
The carousel will take 3 seconds to switch to the next image, then stay on this image for 2 seconds before starting the next 3-second animation.
What I'm looking for: On page load the first image is displayed for 5 seconds before the animation starts. I want the first interval to take only 2 seconds (or instantly start the animation).
To my knowledge, there is no way of differentiating the first slide from the others in terms of the timing functions. One way of doing this, though, is to disable autoplay and then re-enable it. The first movement will take the full autoplayTimeout value, whilst all subsequent timeouts will have the a autoplaySpeed deducted from them.
jQuery('.my-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplaySpeed: 3000
}).trigger("stop.owl.autoplay")
.trigger("play.owl.autoplay");
I have a drop down menu of JS in my website Please click here for website but its dropping very slow. Below is the JS code I am having. Please let me know how to make it to drop fast in Zero Second...
$(document).ready(function($){
$('#mega-menu-7').dcMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'slide'
});
});
Change speed: 'fast' to speed: 0. dcMegaMenu uses the literal speed value for the animation time, so if you set it to 0 it doesn't actually animate and will perform the transition instantly.
I am nesting timeline.
code is like:
timeLine.to(obj1,1.2,{css:{display:"block"}})
nestedTimeline1 = new TimelineMax({repeat:1});
// initially obj2 is with opacity :0
nestedTimeline1.append(TweenLite.to(obj2,1.4,{css:{opacity:1,left:187,bottom:108}}))
nestedTimeline1.append(TweenLite.to(obj2,.5,{css:{opacity:0}}),-.8)
timeLine.append(nestedTimeline1);
when i do:
timeLine.totalProgress(0);
my animation will start from first. But the issues is obj2 opacity will not be reset to 0.
i am not able to understand why this issue is coming?
any solution will be greatly appreciated..
Lets start with the first line.
You cannot animate to display:block - There's no numerical value to animate. You can animate from opacity:0 to opacity:1 just fine.
Now, lets think about the next problem.
You're attempting to animate opacity to 1 over 1.4 seconds.
Your next tween animates the same object from whatever to 0 over 0.5 seconds, with an offset of -0.8 seconds.
I'm not sure if you see the error here, but lets break it down in to a visual representation.
-------------------------------------------------- <-- Tween 1
--------------- <-- Tween 2
You see, Tween 2 finishes before Tween 1, since you pushed it back in the timeline 0.8 seconds and it only runs for 0.5 seconds. So Tween 1 now has that final 0.3 seconds to animate back to opacity:1
Also as a side note, you can use the convenience methods rather than .append(TweenLite...
nestedTimeline1.to(...) does the same thing.