1

I am using jcarousellite control to provide carousel effect on my images via next and prev button. 

<button class="prev"><<</button>
<button class="next">>></button>

<div class="anyClass" style="background-color:Red;" >

    <ul style="width:100%">
        <li style="width:100%" ><div style="background-color:Green; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-1.jpg" /></div></li>
        <li style="width:100%"><div style="background-color:yellow; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-2.jpg" /></div></li>
        <li style="width:100%"><div style="background-color:Green; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-1.jpg" /></div></li>
        <li style="width:100%"><div style="background-color:yellow; width:100%; text-align:center; margin:0 auto;" ><img src="Untitled-2.jpg" /></div></li>            
    </ul>
</div>

I want them to expant as far as the width of the browser. Width : 100%. This is not working for some reason.

I guess the question would be how do I have 100% width of <li> so that it can expand till the end of the screen.

=========================

update

if i set width:105% on anyclass then it is giving full width. However once I go on bigger screen it again gives issues...please help

Leo
  • 23
  • 7
Zeus
  • 3,091
  • 6
  • 47
  • 60
  • You want the images to be 100% width as well? – Marko Jul 06 '10 at 21:23
  • no just the div...wish i could attach the screen shot – Zeus Jul 06 '10 at 21:24
  • image should be in the center of the div and div should be 100%...so when i slide the div by clicking next...whole div including the image inside of it would slide...this way i can get smooth transition...i am able to do this ...problem is 100% width – Zeus Jul 06 '10 at 21:26
  • You need to quote those angle brackets in the button text, like this: "<<" for "<<" and ">>" for ">>". That's important, though not your major problem here. – Pointy Jul 06 '10 at 23:38
  • What exactly does the `
    ` style look like? Does it have padding? A border?
     – Pointy Jul 06 '10 at 23:39

4 Answers4

1

i am not sure it will work, but try

.body {
    width: 100%;
}

in your CSS

Germán Rodríguez
  • 4,284
  • 1
  • 19
  • 19
1

I ended up using another plugin

Zeus
  • 3,091
  • 6
  • 47
  • 60
0

Actually I had to add li and ul with 100% with and no paddin no margin...that did the trick

Zeus
  • 3,091
  • 6
  • 47
  • 60
0
$('.jcarousel')
    .on('jcarousel:create jcarousel:reload', function() {
        var element = $(this),
            width = element.innerWidth();

        if (width > 900) {
            width = width / 1;
        } else if (width > 600) {
            width = width / 1;
        }

        element.jcarousel('items').css('width', width + 'px');
    })
        $('.jcarousel').jcarousel();
Linto Thomas
  • 1