将静态滑块转换为响应滑块

Question

我使用jQuery创建了自己的滑块，但它的长度是固定的。我希望使用纯CSS方法来实现此响应，因为我不想对所有元素使用JavaScript / jQuery来保持style属性。直到现在，我有这个：

$(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>

请按两次 Run Snippet 。看起来像加载问题bug。

我的布局如下：

Full Size Image在Imgur。

现在当我尝试使用下面的CSS：

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

父级（<ul>）的宽度用于子滑块元素，但它是所有幻灯片的整个内容的大小。我需要<li> s来获取其超级父width的相对.items。这可能是使用纯CSS方法实现的吗？

我知道这可以使用jQuery来完成，而每次幻灯片更改或窗口的方向都会发生变化，但会增加大量的style属性，这在性能方面并不好。有人抬头吗？我最后的尝试是利用jQuery添加内联样式。我正在寻找一个纯CSS解决方案。提前谢谢。

Answer 1

如果.items总是全宽，那么使用vw（视口宽度，如评论中的Clayton所建议的那样）将获得纯css解决方案，尽管您需要小心跨浏览器测试。

Fiddle

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

如果只需要相对于.items，我知道没有纯粹的css方法可以让孩子在没有绝对定位的情况下使父母的父亲的百分比宽度（这会破坏你的滑块效果）。