Css3滑块多个图像

Question

可能只创建幻灯片css3没有javascript或在本机javascript上创建迷你代码？ 我想创建像http://owlgraphic.com/owlcarousel或http://flickity.metafizzy.co/

这样的滑块

Thera许多变体为一个可见项目，如jsfiddle链接q4d9m / 170 /但我想在视口中有3个项目。（一次显示最宽浏览器宽度的项目数量）

Answer 1

可以使用简单的标签/无线电输入黑客。 只需点击标签即可。通过更多的工作，你可以把它变成一个非常有用的画廊。

label{
  cursor: pointer;
}

input[type='radio']{
  display: none;
}

.slider{
  position: relative;
}

.slide{
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px;
  background: no-repeat 50% 50% / cover;
}

.slide_1{
  background-image: url(http://placekitten.com/g/200/300)
}
.slide_2{
  background-image: url(http://placekitten.com/g/200/400)
}
.slide_3{
  background-image: url(http://placekitten.com/g/200/150)
}

input:checked + .slide{
  left: 210px;
}

input:checked + .slide + input + .slide{
  left: 420px;
}

<label for="slide_1">label_1</label>
<label for="slide_2">label_2</label>
<label for="slide_3">label_3</label>

<div class="slider">
  <input id="slide_1" type="radio" name="slide-changer" checked/>
  <div class="slide slide_1"></div>
  
  <input id="slide_2" type="radio" name="slide-changer" />
  <div class="slide slide_2"></div>
  
  <input id="slide_3" type="radio" name="slide-changer" />
  <div class="slide slide_3"></div>
</div>

Answer 2

您可以尝试Snapper

中的Filament Group

  

基于CSS Snap-Points的轮播（和轻量级填充）

Answer 3

是的，有可能。这里有一些链接/教程：

http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails http://benschwarz.github.io/gallery-css/

Answer 4

Link-1

Link-2

**或者您可以使用带有少量jquery代码的插件nivo-slider

要为滑块添加导航，您需要js / jquery。