Carousel with variable width of the items

ghost commented 12 years ago

Is there a way to make the carousel with variable width of the items?

$('.flexslider').flexslider({
    animation: "slide",
    directionNav: true,
    animationLoop: false,
    itemWidth: 'variable', // this is the suggested syntax
    itemMargin: 5,
    move: 1
});

tylernotfound commented 12 years ago

Not exactly like that implementation. Using the minItems and maxItems properties will give you flexible carousel items within a given range, however.

Here is a demo: http://flexslider.woothemes.com/carousel-min-max.html

ghost commented 12 years ago

Not the thing I need. Please check: http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php Would be great if FlexSlider had the same option for variable width items in the carousel.

steve-king commented 12 years ago

I'll second that. I need to create a responsive slider (with CSS animation) that allows for variable width on individual items. e.g when a user clicks an item, it's width increases to show extra information beside it.

If anyone has any ideas on how to build this with Flexslider, please let me know!

Samueldhardy commented 12 years ago

Going to third this, I know carousels are relatively new in the last update but dynamic widths would be great for the future.

jpannone commented 12 years ago

I agree. I've struggled to find a variable width slider/feature for a while. I love flexslider, but the lacking feature makes me look for alternative solutions.

oskarrough commented 12 years ago

+1 - would be a very welcome feature.

rw3iss commented 11 years ago

+1

branberg commented 11 years ago

I'll get in on this +1 action...would be a great feature.

javifr commented 11 years ago

+1

ghost commented 11 years ago

+1 (Please reopen the issue)

jacquesletesson commented 11 years ago

+1 as well ! It will avoid to have half images visible when resizing a carousel.

lookvnice commented 11 years ago

+1 - (Please reopen this issue and do something for the solution.) As its really going to be a great feature for the flex slider. Thanks...

yoannisj commented 11 years ago

+1 // I'd love to see this feature in future Flexslider versions.

yoxalld commented 11 years ago

+1 This would be awesome to have this functionality. It is the only time I have to use something other than flexslider. I found one example of the variable width feature here on github. https://github.com/wandoledzep/bxslider

wlanni commented 11 years ago

+1. Right there with everyone else; struggling with figuring out a solution for this in the meantime.

johnbacon commented 11 years ago

+1. We were looking to implement this on our site, and rather than moving away from FlexSlider, we'd love to continue using it with this functionality.

jackrugile commented 11 years ago

+1 Woud definitely use this feature.

theodorocaliari commented 11 years ago

+1

lkrids commented 11 years ago

+1

JeffreyPia commented 11 years ago

+1 Yes please.

msfarrel commented 11 years ago

+1 Have needed this many times before!

eteubert commented 11 years ago

+1 :+1:

bulgblatter commented 11 years ago

+1

courtyo commented 11 years ago

+1

microcipcip commented 11 years ago

+1

hesselberg commented 11 years ago

+1

pierrefaure commented 11 years ago

+1

iaremarkus commented 11 years ago

+1

jackmcpickle commented 11 years ago

+1

suse80 commented 11 years ago

+1

christill commented 11 years ago

@yoxalld BX slider doesn't support variable width slides does it? I can't get it to work.

thib0w commented 11 years ago

+1

yoxalld commented 11 years ago

@christill89 I thought I had an example of BX slider using variable width but I can't find it anymore. My Bad. I have found another one called CarouFredSel at http://caroufredsel.dev7studios.com if that helps.

leabdalla commented 11 years ago

+1

NemoPS commented 11 years ago

+1

Defmoves commented 11 years ago

+1

prebyter commented 11 years ago

+1

does anyone have a workaround?

paulhenric commented 11 years ago

+1

An alternative solution : $("#slider").flexslider({ start: function(){ $("#slider li").css("width", "auto"); } });

carwin commented 11 years ago

+1

Nugerama commented 11 years ago

+1

I've just set up using the workaround from maxxiweb above but the width resets each time the slider slides. Variable width's would be enthusiastically received.

carwin commented 11 years ago

@Nugerama I'm using the same workaround and I'm psuedo-solving that problem by also setting a before and after function that does the same thing.

Nugerama commented 11 years ago

Thanks @carwin - I think I already nailed it with 'start' and 'before', seems to have done the trick. Thanks for the tip though.