有没有办法不用JS或Jquery修改它？

Question

我在这里发现了该图像轮播，我想知道是否有一种方法可以使其不自动滚动，而是具有导航按钮，以及使其具有响应能力。 有没有办法做到这一点，但仍然只保留CSS？

<h1>css3 carousel</h1>

<div class="carousel">
<div class="holder">
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/300x200" alt="" />
<img src="http://fakeimg.pl/400x300" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/500x400" alt="" />
<img src="http://fakeimg.pl/210x105" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/250x150" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
 </div>
</div>


@import url(http://fonts.googleapis.com/css?family=PT+Sans);

body {
font-family: 'PT Sans', Arial, Verdana;
background-color: #eee;
}

h1 {
text-align: center;
font-size: 48px;
 text-transform: uppercase;
 letter-spacing: 3px;
 color: #222;
}

img {
display: inline-block;
width: 200px;
height: 100px;
}

.carousel {
 width: 830px;
 height: 120px;
 overflow: hidden;
 padding: 8px;
 box-sizing: border-box;
 border: 2px solid #999;
 box-shadow: 0 0 4px #000;
 margin: 0 auto;
  border-radius: 5px;

   }

.holder {
 animation: carousel 25s linear infinite;
 white-space: nowrap;
  will-change: transform;

  &:hover {
  animation-play-state: paused;
  }
 }

 @keyframes carousel {
   0% {
   transform: translateX(0);
 }

   50% {
   transform: translateX(-100%);
   }

   100% {
  transform: translateX(0);
  }
  }

Answer 1

稍微更改CSS将添加基本的悬停功能，以从停止位置开始启动滑块。

.holder {
  animation: carousel 25s linear;
  white-space: nowrap;
  will-change: transform;
  animation-play-state: paused;

  &:hover {
    animation-play-state: running;
  }
}

使用“媒体查询”使响应变得容易。

但是考虑到要使其具有响应性，那么您将需要“点击事件”以使其在移动设备上运行（因为移动设备没有悬停功能）。 CSS无法执行点击事件，因此您将需要javascript或jQuery。 但这应该很简单，您只需通过简单的click事件更改次要CSS。 但是，考虑到那里有无数的免费和基本轮播插件，我会选择其中之一。 您在这里所看到的似乎是CSS动画的演示，并且如果没有某种JavaScript，则在CSS动画控制方面将始终受到限制。