Simple slider with width 100%

Question

I'm using a simple slider plugin to create a ticker bar like this:

and then changes to the next slide:

It's exactly like this "plugin" but the problem is that in my case the width of the slider must be 100% of the screen (the plugin has a fixed width of 500px ):

http://codepen.io/zuraizm/pen/vGDHl

I tried adding width: 100% to the CSS slider , ul and li with no luck:

    #slider {
      position: relative;
      overflow: hidden;
      margin: 20px auto 0 auto;
      border-radius: 4px;
      width: 100% !important;
    }

    #slider ul {
      position: relative;
      margin: 0;
      padding: 0;
      height: 200px;
      list-style: none;
      width: 100% !important;
    }

    #slider ul li {
      position: relative;
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 500px;
      height: 300px;
      background: #ccc;
      text-align: center;
      line-height: 300px;
      width: 100%;
    }

Any ideas on how to make it work on width:100% like my example images?

Answer 1

The slider-elements also needs to get a width of 100%:

#slider {
    width: 100%;
}

and also:

#slider ul li {
    width: 100%;
}

Do not assign the width-value two times to the same element via css like in your entry-post. I've tried this on your fiddle and it works.

Edit:

And also do some adjustments on your JS, in your "fiddle" replace line 14-16 with:

$('#slider').css({ height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, height: slideHeight });

$('#slider ul li').css({ width: slideWidth }); 

http://codepen.io/anon/pen/viBHe

Answer 2

Try delete position: relative; for #slider and give him width: 100% , because full width taken from parent element. Element with absolute, relative, fixed positions does not have parent element. Or you can do this with JQuery.

Answer 3

Because it's a sliding effect you can't add width: 100% to the li elements just like that. The javascript resizes the UL width to the size of all the combined slider items. What you would have to do to make this work is to

1. You need to calculate the width the slides should be(probably the size of the browser window or the container DIV) and resize the images using javascript as well as change the slideWidth variable to the new width.

2. If you have a responsive layout and need the slider to be responsive as well you will have to create a function in JQuery that listens to the resize event. When the slider is resized you need to change the variable slideWidth to the new size of the slider.