All geek questions in one place

JQuery Carousel is nervous

The carousel shifts slightly / jumps during the transition, and I'm not sure what happened.

$(".timer").css("display"); $(".timer:gt(5)").css("display", "none"); function move_first() { //console.debug("animate"); $(".timer").eq(0).stop().animate({ opacity: 0.00, width: "toggle" }, 500, function() { $(this).insertAfter($(".timer").eq(-1)); $(this).css('opacity', '1'); $(".timer").eq(5).animate({ opacity: 1.00, width: "toggle" }, 500, function() { $(".timer").css("display"); $(".timer:gt(5)").css("display", "none"); }); }); setTimeout(move_first, 3000); } move_first();

Here's a link to jsfiddle: Jumpy Carousel

Any ideas?

+5
source share
2 answers

There is an interval between ul elements. This is caused by any space in your HTML. For example, you can eliminate it by excluding all line breaks in your HTML. Since this is obviously impossible, it is best to simply get rid of the interval by making it equal to zero. Since the spacing is technically caused by the font, we can use font-size: 0; . You can do this by adding the following to your CSS:

 #carousel-images ul { font-size:0; }

Of course, it might be better to give your ul identifier and a link to this selector in your CSS. IF you still want to spacing elements, you can use fields and padding to accomplish this.

 #carousel-images ul li { margin-right:10px; }

Edit: I see that the question has already been answered. Awesome! I also added an example solution to preserve some space.

+2
source

The space between the elements is also counted and provides an incorrect calculation of the width. You can fix this by adding:

 ul { font-size: 0; }

Fiddle: http://jsfiddle.net/uqt8kbxm/2/

Link: Fighting the space between inline block elements

+1
source

Source: https://habr.com/ru/post/1209259/

More articles:


All Articles