插件描述：用CSS制作交互式滑块，这是可能的，没有使用任何JavaScript。在这里下面教程告诉你如何使纯CSS不使用jQuery或基于JavaScript来创建全屏滑块。
我们要创建基于CSS的动画滑块，这个滑块的工作没有任何JavaScript的使用。对于基于CSS的滑块控件一样，分页，下一步，上一步，我们使用单选按钮和标签”属性。
首先我们创建HTML CSS滑块结构。需要一个div和应用类的名称如“css-slider-wrapper”所有元素都将放在这个结构中
1 | <div class="css-slider-wrapper"></div> |
这样的div css 其具有全屏幻灯片，所以我们设置位置绝对
1 2 3 4 5 6 7 8 9 10 | .css-slider-wrapper { display: block; background: #FFF; overflow: hidden; position:absolute; left:0; right:0; top:0; bottom:0;} |
我们创建了外层div，接下来我们要创建4个内部轮播滑块，html和css如下所示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="css-slider-wrapper"> <div class="slider slide1"> <div> <h2>Css Based slider</h2> </div> </div> <div class="slider slide2"> <div> <h2>CSS Slider without use of any javascript or jQuery</h2> </div> </div> <div class="slider slide3"> <div> <h2>Full screen animation slider</h2> </div> </div> <div class="slider slide4"> <div> <h2>css3 slider</h2> </div> </div></div> |
每个幻灯片创建4个类，CSS如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .slider { width: 100%; height: 100%; background: red; position: absolute; left: 0; top: 0; opacity: 1; z-index: 0; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: row; flex-wrap: wrap; -webkit-flex-align: center; -webkit-align-items: center; align-items: center; justify-content: center; align-content: center; -webkit-transition: -webkit-transform 1600ms; transition: -webkit-transform 1600ms, transform 1600ms; -webkit-transform: scale(1); transform: scale(1);}/* each slide background color */ .slide1 { background: #00bcd7; left: 0;}.slide2 { background: #009788; left: 100%}.slide3 { background: #ff5608; left: 200%}.slide4 { background: #607d8d; left: 300%;} |
我们已经做了滑块的CSS和HTML。接下来要创建控制分页，上下按钮，滑块。滑块控件的HTML和CSS如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | /* slider-pagination */ .slider-pagination { position: absolute; bottom: 20px; width: 100%; left: 0; text-align: center; z-index: 1000;}.slider-pagination label { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: rgba(255,255,255,0.2); margin: 0 2px; border: solid 1px rgba(255,255,255,0.4); cursor: pointer;} /* Next and previous button*/.control { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; z-index: 55;}.control label { z-index: 0; display: none; text-align: center; line-height: 50px; font-size: 50px; color: #FFF; cursor: pointer; opacity: 0.2;}.control label:hover { opacity: 0.5;}.next { right: 1%;}.previous { left: 1%;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="slider-pagination"> <label for="slider_1" class="page1"></label> <label for="slider_2" class="page2"></label> <label for="slider_3" class="page3"></label> <label for="slider_4" class="page4"></label></div><div class="next control"> <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label> <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label> <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label> <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label></div><div class="previous control"> <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label> <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label> <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label> <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label></div> |
完成控制元素的HTML和CSS后，我们要创建单选按钮。因为我们使用此单选按钮主要功能为移动滑块这个单选按钮，把我们在第一位置像下面的HTML结构主滑块容器div
1 2 3 4 5 6 | <div class="css-slider-wrapper"> <input type="radio" name="slider" class="slide-radio1" checked id="slider_1"> <input type="radio" name="slider" class="slide-radio2" id="slider_2"> <input type="radio" name="slider" class="slide-radio3" id="slider_3"> <input type="radio" name="slider" class="slide-radio4" id="slider_4"> |
对于CSS或单选按钮我们隐藏浏览器，因为我们不想显示在浏览器中，我们将使用属性标签
现在我们做滑动控制CSS，当你点击“下一步”，以前和分页按钮。我们使用：检查伪类来控制滑动。
为控制滑动效果的CSS这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* Slider control sliding effect */.slide-radio1:checked ~ .slider { -webkit-transform: translateX(0%); transform: translateX(0%);}.slide-radio2:checked ~ .slider { -webkit-transform: translateX(-100%); transform: translateX(-100%);}.slide-radio3:checked ~ .slider { -webkit-transform: translateX(-200%); transform: translateX(-200%);}.slide-radio4:checked ~ .slider { -webkit-transform: translateX(-300%); transform: translateX(-300%);} /* next and previous will be active when slider moving*/.slide-radio1:checked ~ .next .numb2, .slide-radio2:checked ~ .next .numb3, .slide-radio3:checked ~ .next .numb4, .slide-radio2:checked ~ .previous .numb1, .slide-radio3:checked ~ .previous .numb2, .slide-radio4:checked ~ .previous .numb3 { display: block; z-index: 1} /* css for active current pagination */.slide-radio1:checked ~ .slider-pagination .page1, .slide-radio2:checked ~ .slider-pagination .page2, .slide-radio3:checked ~ .slider-pagination .page3, .slide-radio4:checked ~ .slider-pagination .page4 { background: rgba(255,255,255,1)} |
最后的HTML和css的滑块代码是如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！ 本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！ 如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
|