Converting a static slider to responsive one

Question

I created my own slider using jQuery, but it is of fixed length. I want to make this responsive using a pure CSS approach, as I don't want to use JavaScript / jQuery for all the elements to have style attribute sticking. Till now, I have this:

$(document).ready(function(){
  $(".items ul li").each(function(){
    $(".items ul").width($(".items ul").width() + $(this).outerWidth());
    if ($(this).height() > $(".items").height())
      $(".items, .items ul").height($(this).outerHeight()+10);
  });
  $(".items ul").css("left", -$(".items ul li.current").prev().position().left);
  $(".items ul li:first").click(function(){
    if ($(this).hasClass("current"))
      return false;
    left = $(this).position().left-3-$(this).outerWidth();
    $(".items ul li").removeClass("current", 1200);
    $this = $(this);
    $(".items ul").animate({"left": -left+5}, 200, function() {
      $this.addClass("current", 1200);
    });
    return false;
  });
  $(".items ul li").click(function(){
    if ($(this).hasClass("current"))
      return false;
    left = $(this).prev().position().left+3;
    $(".items ul li").removeClass("current", 1200);
    $this = $(this);
    $(".items ul").animate({"left": -left+5}, 200, function() {
      $this.addClass("current", 1200);
    });
    return false;
  });
});

* {font-family: Segoe UI; line-height: 1; margin: 0; padding: 0;}
body {font-size: 80%;}
.items {position: relative; width: 500px; overflow: hidden; margin: auto; padding: 15px;}
.items ul {position: absolute; top: 0;}
.items ul, .items ul li {margin: 0; padding: 0; list-style: none; display: block; overflow: hidden; border-radius: 5px;}
.items ul li {display: block; width: 150px; text-align: center; float: left; margin: 0 5px; margin-top: 40px; box-shadow: 0 0 5px #000;}
.items ul li a,
.items ul li a img,
.items ul li strong,
.items ul li span {display: block; margin: 5px 0;}
.items ul li a img {max-width: 100%;}
.items ul li.current {width: 200px; font-size: 1.2em; margin-top: 5px;}
.items ul li strong {font-size: 1.2em;}
.items ul li span {font-size: 1.1em;}
.items ul li a:first-child,
.items ul li a img {margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="items">
  <ul>
    <li>
      <a href="#"><img src="http://placehold.it/345x500" alt=""></a>
      <strong>Title 1</strong>
      <span>Subtitle 1</span>
    </li>
    <li>
      <a href="#"><img src="http://placehold.it/345x500" alt=""></a>
      <strong>Title 2</strong>
      <span>Subtitle 2</span>
    </li>
    <li class="current">
      <a href="#"><img src="http://placehold.it/345x500" alt=""></a>
      <strong>Title 3</strong>
      <span>Subtitle 3</span>
    </li>
    <li>
      <a href="#"><img src="http://placehold.it/345x500" alt=""></a>
      <strong>Title 4</strong>
      <span>Subtitle 4</span>
    </li>
    <li>
      <a href="#"><img src="http://placehold.it/345x500" alt=""></a>
      <strong>Title 5</strong>
      <span>Subtitle 5</span>
    </li>
  </ul>
</div>

Please press the Run Snippet twice. Seems like a loading issue bug.

I have the layout laid out like this:

Full Size Image at Imgur.

Now when I try to use the below CSS:

.items {width: 80%;}
.items ul li {width: 30%;}
.items ul li.current {width: 40%;}

The width of the parent (<ul>) is taken for the child slider elements, but it is the size of the whole contents of all the slides. I need the <li>s to take the relative width of its super-parent .items. Is this possible to achieve using pure CSS methods?

I know this can be done using jQuery, while every slide change or window's orientation change, but that adds a huge load of style attributes, which is not good in terms of performance. Any heads up on this? My final attempt will be making use of jQuery to add inline styles. I am looking for a pure CSS solution. Thanks in advance.

Answer 1

If .items is always full-width, using vw (viewport width, as suggested by Clayton in the comments) will get a pure css solution, although you'll want to be careful with cross-browser testing.

Fiddle

/* Responsiveness: */
.items {width: 80vw;}
.items ul li {width: 25vw;}
.items ul li.current {width: 30vw;}
.items li img {width:100%;}

If it just has to be relative to .items, I know of no pure css way to make a child a % width of it's parent's parent without absolute positioning (which would destroy your slider effect).