开发者

jQuery: Count items in carousel, maybe by width

开发者 https://www.devze.com 2023-02-12 15:50 出处:网络
I\'m working on a flexible jCarousel that needs a number to know how many items it will scroll. But because the carousel is fluid/liquid width, the number is flexible too.

I'm working on a flexible jCarousel that needs a number to know how many items it will scroll. But because the carousel is fluid/liquid width, the number is flexible too.

I guess I could do two t开发者_Python百科hings:

Count items: Is it possible to count items that are visible? There is a lot of items, but i want the number of items that is visible.

Calculate: I guess I could get the width and devide it by the width of the items. div.width() / 75 .. and make it return a single number. But how do I get the width of a DIV (let's say 1421px) and devide it by 75 (which is the width of a item) (which will be: 18,94666666666667) but will return the nearest number??

What and how should I do it? Thank you in advance...


I don't know, if there's an easy way to only get the visible items. If I understand that right, you mean the items in the visible area - otherwise you could use $('.item:visible'), .item being the class name of the carousel items.

For calculating try this:

var carouselWidth = $('#carousel').width();  // carousel main div with id=carousel
var numberOfItems = Math.round(carouselWidth / 75);

Hope this helps!


not sure about what you're trying to achieve here, but as for your 2 presented solutions:

  • counting visible items in jquery is possible via the ':visible' selector, but i guess this won't work for you as the jCarousel doesn't actually hide items via the css 'display' property, but instead covers them using the parent element as a mask.

  • calculation as you suggested might be the best option, from what i can see you just need to make use of the javascript's built-in Math functions, eg. Math.floor(18.946) will return 18


Try carouFredSel: http://caroufredsel.frebsite.nl

It'll do all the calculations for you, even if your items have variable sizes...

0

精彩评论

暂无评论...
验证码 换一张
取 消