search

KevinBatdorf / liquidslider

A Responsive jQuery Content Slider
161 stars 63 forks source link

How to set width to 100% #163

Open eivanmariscal opened 8 years ago

eivanmariscal commented 8 years ago

Hello, I'm trying to set the slider width to 100% but something strange happens when positioning on the last slide/tab, it shows a fragment of the first tab and the current tab moves to the left side. When positioning on the other tabs the content looks fine.

When I resize the window on Chrome the problem fixes itself but on Firefox it fixes for a couple of seconds and then it moves again. screenshot_2

This is the CSS I changed: .liquid-slider .ls-panel {
width: 100%; display: block; float: left; }

How can I set the slider to 100%?

KevinBatdorf commented 8 years ago

One possible solution:

Try setting the .ls-panel and .liquid-slider classes to both a fixed max-width like 2000px. I know it's not very semantic but I wrote this code 4 years ago and had to make it easily upgradable with the Coda Slider that came before it

If that doesnt work, I have another idea what might be causing it. Let me know

eivanmariscal commented 8 years ago

Thank you for replying, Kevin. I tried setting the max-width to 2000px but it didn't fix the problem. However, I tried with values like 1000, 1400px and the problem was partially solved. On screen resolutions like 1080p the slider works perfectly because I set the max-width to 1400px but on resolutions below 1080p the problem keeps happening. Do you think there's another alternative to fix the problem? Thanks in advance!

KevinBatdorf commented 8 years ago

It could be specific to your code. Send me an email kbat82@gmail.com with your code and I'll post the solution here.

cacacobra commented 5 years ago

I solved this doing some dirty fix. See code below, taken from "jquery.liquid-slider.min.js"

.css({"max-width":jQuery(i.sliderId+" .ls-panel:first-child").width(),width:"100%"})

Just change "max-width" to "mmax-width" or some inválid CSS code, it worked for me.

KevinBatdorf commented 5 years ago

Hey @cacacobra

This thread 2.5 years old :D I haven't worked on this code in a long time so it's not fresh in my memory. I'm not sure the above hack is needed, but if it works then good. Resize the browser a few times to make sure nothing breaks.