纯CSS全屏轮播滑块

所属分类:媒体-幻灯片和轮播图

 50770  404  查看评论 (15)
分享到微信朋友圈
X
纯CSS全屏轮播滑块 ie兼容10

我们要创建基于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  {
  displayblock;
  background#FFF;
  overflowhidden;
  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 {
    width100%;
    height100%;
    backgroundred;
    positionabsolute;
    left0;
    top0;
    opacity: 1;
    z-index0;
     
    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-contentcenter;
    align-contentcenter;
     
    -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;
    left0;
}
.slide2 {
    background#009788;
    left100%
}
.slide3 {
    background#ff5608;
    left200%
}
.slide4 {
    background#607d8d;
    left300%;
}

我们已经做了滑块的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 {
    positionabsolute;
    bottom20px;
    width100%;
    left0;
    text-aligncenter;
    z-index1000;
}
.slider-pagination label {
    width10px;
    height10px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(255,255,255,0.2);
    margin0 2px;
    bordersolid 1px rgba(255,255,255,0.4);
    cursorpointer;
}
  
/* Next and previous button*/
.control {
  positionabsolute;
  top50%;
  width50px;
  height50px;
  margin-top-25px;
  z-index55;
}
.control label {
  z-index0;
  displaynone;
  text-aligncenter;
  line-height50px;
  font-size50px;
  color#FFF;
  cursorpointer;
  opacity: 0.2;
}
.control label:hover {
  opacity: 0.5;
}
.next {
  right1%;
}
.previous {
  left1%;
}
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 {
  displayblock;
  z-index1
}
  
/* 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
51
52
53
54
55
<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">
     
     
    <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>
     
     
    <div class="slider slide1">
        <div>
            <h2>Css Based slider</h2>
            <a href="#" class="button">Download</a
        </div>
    </div>
    <div class="slider slide2">
        <div>
            <h2>CSS Slider without use of any javascript or jQuery</h2>
            <a href="#" class="button">Download</a
        </div>
    </div>
    <div class="slider slide3">
        <div>
            <h2>Full screen animation slider</h2>
            <a href="#" class="button">Download</a>
        </div>
    </div>
    <div class="slider slide4">
        <div>
            <h2>css3 slider</h2>
            <a href="#" class="button">Download</a
        </div>
    </div>
</div>

最后的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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
/* Slider wrapper*/
  .css-slider-wrapper {
      displayblock;
      background#FFF;
      overflowhidden;
      positionabsolute;
      left0;
      right0;
      top0;
      bottom0;
  }
  /* Slider */
  .slider {
      width100%;
      height100%;
      backgroundred;
      positionabsolute;
      left0;
      top0;
      opacity: 1;
      z-index0;
       
      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-contentcenter;
      align-contentcenter;
       
      -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;
      left0;
  }
  .slide2 {
      background#009788;
      left100%
  }
  .slide3 {
      background#ff5608;
      left200%
  }
  .slide4 {
      background#607d8d;
      left300%;
  }
  .slider > div {
    text-aligncenter;
  }
  /* Slider inner content */
  .slider h2 {
      color#FFF;
      font-weight900;
      text-transformuppercase;
      font-size45px;
      line-height120%;
      opacity: 0;
      -webkit-transform: translateX(500px);
      transform: translateX(500px);
  }
  .slider .button {
      color#FFF;
      padding5px 50px;
      background: rgba(255,255,255,0.3);
      text-decorationnone;
      opacity: 0;
      font-size15px;
      line-height30px;
      display: inline-block;
      -webkit-transform: translateX(-500px);
      transform: translateX(-500px);
  }
  .slider h2, .slider .button {
      -webkit-transition: opacity 800ms, -webkit-transform 800ms;
      transition: transform 800ms, opacity 800ms;
      -webkit-transition-delay: 1s; /* Safari */
      transition-delay: 1s;
  }
  /* Next and previous button */ 
  .control {
      positionabsolute;
      top50%;
      width50px;
      height50px;
      margin-top-25px;
      z-index55;
  }
  .control label {
      z-index0;
      displaynone;
      text-aligncenter;
      line-height50px;
      font-size50px;
      color#FFF;
      cursorpointer;
      opacity: 0.2;
  }
  .control label:hover {
     opacity: 0.5;
  }
  .next {
    right1%;
  }
  .previous {
    left1%;
  }
   
  /* Slider pagination */ 
  .slider-pagination {
      positionabsolute;
      bottom20px;
      width100%;
      left0;
      text-aligncenter;
      z-index1000;
  }
  .slider-pagination label {
      width10px;
      height10px;
      border-radius: 50%;
      display: inline-block;
      background: rgba(255,255,255,0.2);
      margin0 2px;
      bordersolid 1px rgba(255,255,255,0.4);
      cursorpointer;
      }
       
  /* Slider control active css */
  .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 {
      displayblock;
      z-index1
  }
  /* Slider pagination active css */
  .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)
  }
   
  /* css for sliding  effect when you click on control button*/
  .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%);
  }
   
  .slide-radio1:checked ~ .slide1 h2
  .slide-radio2:checked ~ .slide2 h2
  .slide-radio3:checked ~ .slide3 h2
  .slide-radio4:checked ~ .slide4 h2
  .slide-radio1:checked ~ .slide1 .button, 
  .slide-radio2:checked ~ .slide2 .button, 
  .slide-radio3:checked ~ .slide3 .button, 
  .slide-radio4:checked ~ .slide4 .button {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
  }
   
@media only screen and (max-width767px) {
  .slider h2 {
      font-size20px;
  }
  .slider > div {
      padding0 2%
  }
  .control label {
      font-size35px;
  }
  .slider .button {
      padding0 30px;
  }
  }

完成您可以查看演示和从下面的链接下载源代码。


相关插件-幻灯片和轮播图

jQuery响应式全屏轮播图插件

jQuery响应式全屏轮播图插件,支持移动端触屏切换。
  幻灯片和轮播图
 47087  506

html5滑动图片轮播展示

具有悬停效果的自适应图片滑动轮播
  幻灯片和轮播图
 34569  244

bootstrap响应的另一种轮播形式

应用官网Carousel的另一种响应式轮播,在也不用费力找插件了。只要引入bootstrap,好不容易弄出来的……
  幻灯片和轮播图
 81346  488

jQuery图片轮播插件带缩略图,响应式触屏滑动

jQuery图片轮播插件制作带缩略图的响应式图片轮播,支持手机,移动端触屏滑动图片切换效果
  幻灯片和轮播图
 20060  247

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Wind 0
    2019/5/29 10:20:26
    想请教怎么自动播放?能改出来吗? 回复
    0
    2019/4/12 13:23:59
    很好看 。有机会下载下载看看 回复
    天之娇女 0
    2017/10/28 14:41:04
    驴云 0
    2017/10/5 14:31:21

    有没有自动播放?

    回复
    我。都想知道 0
    2017/8/23 10:03:53
    梦幻王子 0
    2017/5/23 2:28:47
    逝去丶青春 0
    2017/3/2 18:42:39
    花儿开不败。 0
    2017/2/27 14:08:02

    怎么自动切啊  

    回复
    深白??月 0
    2017/1/31 11:08:42

    厉害了,我的哥

    回复
    an之若素 0
    2016/10/30 14:10:45
    很棒,我会一直关注和学习。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复