CODEWITHSUNDEEP
javascriptjquery
Oleksandr Matrosov
Oleksandr Matrosov

Reputation: 27113

JQuery change width that given in percent issue.

I am using this script for my smile slider http://codepen.io/zuraizm/pen/vGDHl,

but when I try to set #slider ul li width to 90% in css it want work, I've checked js and if I use percent width intend of pixel it return for me 0 value for 

var slideWidth = $('#slider ul li').width();

but if I for example set #slider ul li width to 100px; in css it calculate it in right way.

I have read about the percent and pixels different and seems everybody says that $('#slider ul li').width() should return px instead of percent, but it return 0 for me.

Just what I want it is make my slider with 90% width and max-width 760 px, but when I change width it causes on the calculation js.

Upvotes: 0

Views: 61

Answers (1)

ostrgard
ostrgard

Reputation: 380

You're setting the ul to be slideCount * slideWidth. If you're slide is 500px width with 4 slides, the ul width will be 2000px. If your li width is set to 90%, that's 1800px. You see?

You want to set each li width to be the same as the slider width, so add the line in the middle to your code:

...
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li').css({ width: slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
...

You determine the slide width by styling the li, but when setting up you're slider with jquery, you add the css to #slider and the ul. I'd suggest setting the height and width on #slider and removing it from ul and li. Check this Fiddle: http://jsfiddle.net/hfbmma1r/

Upvotes: 1

Related Questions