纯CSS就能实现可点击切换的轮播图，Feel起来很丝滑

轮播图经常会在项目里用到，但是实际上用到的轮播图都是比较简单的，没有复杂的特效，这个时候如果去引入swiper那些库的话，未免就有点杀鸡焉用牛刀了。,所以不如自己手写一个，而今天我要分享的一种写法也是我最近才发现的，发现写起来真的是很丝滑，只纯css就实现了呢！,可以先看看预览效果：,for 属性规定 label 与哪个表单元素绑定,label的for属性要与绑定表单元素（input）的ID对应。绑定完成后可以通过点击label触发表单元素的默认属性。通俗的讲就是你绑定完了点lebel就相当于点击表单元素（input）。,首先先写了所需要的三个子元素。分别给了三种颜色。,接下来。最外层加上overflow: hidden,让只显示一个slide子元素。,接下来，加上label和input起到控制切换的效果。,这里利用input和label来模拟轮播图的pagination分页功能。label模拟的是圆点，然后把radio输入框隐藏了。radio放在最前面的目的是为了用了控制后面的slides 和controls的 样式。,现在实现点击label切换轮播图的效果。,可以看到已经非常地简单就实现了点击lebel切换轮播图的效果。,当然，我们要实现一个上下页切换的功能也非常简单。,我们添加三组navigator，一页页面对应一组。,我们要把不属于当前的那一页的navigator隐藏掉，所以用display:none，当选中对应的页面的时候，再让它显示出来，所以可以这样实现。,可以看到，又轻而易举就实现了点击切换上下页的功能，太腻害了。