Geek Answers Handbook

CarouFredSel - set the visible amount of the actual number of images - and still scroll?

I work with this scroller

http://coolcarousels.frebsite.nl/c/2/

I have this setting below.

My problem is that I have set the visible: 4 value and I have 4 images, so it doesn't scroll. If I set it to visible: 3 , then it works as expected. But I want to show all 4 images on one screen when you open the full width of the browser with a resolution of 1920 pixels. So the problem seems. If I set the visible volume of the images that I have, it will stop working.

Is there a way to have all 4 images on the screen at a time and then scroll through them?

 $(function() { $('#carousel').carouFredSel({ width: '100%', align: 'left', items: { visible: 4, start: 0, }, scroll: { items: 1, queue : true, fx: "scroll", easing: "swing", duration: 1000, timeoutDuration: 3000 }, prev: '.prev', next: '.next', auto: { easing: "quadratic", button: '.play', pauseOnEvent: 'resume', pauseOnHover: true } }).find(".slide .plusNav").hover( function() { $(this).find("div").slideDown(); }, function() { $(this).find("div").slideUp(); } ); });
+6
source share
4 answers

try it

 items: { minimum: 0, },
+7
source

I solved this problem by setting the minimum to 0.

 items: { minimum: 0,

Actually, setting the minimum attribute to zero causes the scroll bar to always be displayed regardless of the number of items currently being displayed.

It was required for me because the automatic inclusion of scrollbars did not work on certain screen resolutions - I had to add 2 more elements to make the scrollbar visible, which was not expected.

As a job, I set minimum: 0 - it solved the problem.

0
source

I was able to do this by editing the source code: /

If you comment out these lines 554 and 556 in jquery.carouFredSel-6.2.0.js, like this ...

 // not enough items var minimum = (is_number(opts.items.minimum)) ? opts.items.minimum : opts.items.visible + 1; if (minimum > itms.total) { // e.stopImmediatePropagation(); // return debug(conf, 'Not enough items ('+itms.total+' total, '+minimum+' needed): Not scrolling.'); }

... it worked for me.

-1
source

Open the shell and set its height (provided that all children have the same height):

 var carousel = [your_carousel], carousel_wrapper = carousel.parent(); carousel_wrapper.height(function(){ return (carousel.children('[child_selector]').length) * [child_height]; });

The thing here is there will be strange behavior when the carousel comes to life. This is because the maximum height was performed ((n-1) * child_height) intentionally as a mask, as well as overflow: hidden .

Another option would be to duplicate one of the children, but this was not semantic.

-1
source

More articles:


All Articles