Home Web Design CSS Pure HTML and CSS Slider | Autoplay Slider Source Code

Pure HTML and CSS Slider | Autoplay Slider Source Code

April 11, 2019

44926

Pure HTML and CSS Slider, Get Autoplay Slider Source Code. If You are looking for a slider example to put it on your website, then you are in the right place. You must have seen many types of sliders before on different websites. Most of these websites use a framework like JQuery. If you thinking right now that they use bootstrap, then I want to inform you Bootstrap also runs with JQuery.

Now, If you are a beginner & don’t know much about JQuery, And want a simple slider. Then this post will be very informative and helpful for you. Because today I am sharing a simple HTML & CSS slider. This is in Pure HTML & CSS, No JavaScript or not any framework or libraries. That’s a very rich look slider, and features are in CSS.

This is an autoplay slider. In other words, this slider plays or run automatically without JavaScript. This slider has some text on it, you can place images as well. This program is very easy to understand and change. Even a beginner can modify this pure CSS slider program. Maybe now you thinking this program is very similar or bad looking etc. Because it is made with only HTML & CSS, The you are wrong. Let’s take a look:

Preview Of This Autoplay Slider

Let’s see how the program looks like:

Now you got an idea about this slider program. In my opinion, this is a good slider. If you have knowledge about JavaScript or any its framework that’s great. Otherwise, you can use this program on your professional website also.

Pure HTML and CSS Slider Source Code

Maybe now you want this slider, that’s why I am sharing the source code of this CSS slider. You have to create just two files for this program. One for HTML and another of CSS. Now let’s create this program together.

index.html

You have to create an HTML file called ‘index.html‘ or any name as you want & put these codes in the file.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com) -->

<html>

<head>
  <meta charset="UTF-8">
  <title>HTML &amp; CSS Slider | Webdevtrick.com</title>
  
  
  
      <link rel="stylesheet" href="style.css">

  
</head>



  <body>
  <div class='slider'>
    <input name="input-slider" id='input-slide-0' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-1' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-2' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-3' type="radio" class='input-slide input-slide-num' >
    <input name="input-slider" id='input-slide-autoplay' type="radio" class='input-slide' checked>
    <ul>
      <li class='slide-0'></li>
      <li class='slide-1'></li>
      <li class='slide-2'></li> 
      <li class='slide-3'></li>        
    </ul>
    <div class='slide-description'>
      <label class='slide-0'>
        <h1 class="text-slide">CSS SLIDER #1</h1>
      </label>
      <label class='slide-1'>
        <h1 class="text-slide">CSS SLIDER #2</h1>
      </label>
      <label class='slide-2'>
        <h1 class="text-slide">CSS SLIDER #3</h1>
      </label>
      <label class='slide-3'>
        <h1 class="text-slide">CSS SLIDER #4</h1>
      </label>
    </div>
    <div class='slider-arrow-prev'>
      <label class='slide-0' for='input-slide-0'></label>
      <label class='slide-1' for='input-slide-1'></label>
      <label class='slide-2' for='input-slide-2'></label>
      <label class='slide-3' for='input-slide-3'></label>
    </div>
    <div class='slider-arrow-next'>
      <label class='slide-0' for='input-slide-0'></label>
      <label class='slide-1' for='input-slide-1'></label>
      <label class='slide-2' for='input-slide-2'></label>
      <label class='slide-3' for='input-slide-3'></label>
    </div>        
    <div class='slider-dot'>
      <label class='slide-0' for='input-slide-0'></label>
      <label class='slide-1' for='input-slide-1'></label>
      <label class='slide-2' for='input-slide-2'></label>
      <label class='slide-3' for='input-slide-3'></label>
    </div>        
  </div>
  <div class="footer">
    <p>
      <span>We Share These Types Of Lots Of Programs. For More Program's Source Code</span>
      <span><a href="https://webdevtrick.com" target="_blank">Visit WebDevTrick</a></span>
    </p>
  </div>
</body>
  
  



</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML & CSS Slider | Webdevtrick.com</title>

</head>

<body>

<ul>

</ul>

<h1 class="text-slide">CSS SLIDER #1</h1>

</label>

<h1 class="text-slide">CSS SLIDER #2</h1>

</label>

<h1 class="text-slide">CSS SLIDER #3</h1>

</label>

<h1 class="text-slide">CSS SLIDER #4</h1>

</label>

</div>

</div>

</div>

</div>

<p>

<span>We Share These Types Of Lots Of Programs. For More Program's Source Code</span>

<span><a href="https://webdevtrick.com" target="_blank">Visit WebDevTrick</a></span>

</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

/* Code By Webdevtrick ( https://webdevtrick.com) */
@import url('https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway');
body{
  width: 100%;
  margin: 0 auto;
  font-family: 'Raleway', sans-serif;
  color: #FFF;
  font-size: 1.75vw;
}
body *{
  width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 100;
}
h1{
  font-size: 6vw;
  text-transform: uppercase;
  font-weight: normal;
}
a{
  color: inherit;
  text-decoration: none;
  outline: 0;
}
ul,
li{
  list-style: none;
}
label{
  cursor: pointer;
}
input{
  display: none;
}

.slider{
	height: 25vw;
	overflow: hidden;
}

.slider > ul {
	height: 100%;
	z-index: 100;
}
.slider > ul > li{
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;

	opacity: 0;
	z-index: 1;	
  	transition: all 2000ms ease;
}
.slider > #input-slide-0:checked ~ ul > li.slide-0,
.slider > #input-slide-1:checked ~ ul > li.slide-1,
.slider > #input-slide-2:checked ~ ul > li.slide-2,
.slider > #input-slide-3:checked ~ ul > li.slide-3{
	opacity: 1;
	z-index: 2;
}
.slider > ul > li.slide-0{
	background-color: #47D7ED;
}
.slider > ul > li.slide-1{
	background-color: #47D7ED;
}
.slider > ul > li.slide-2{
	background-color: #47D7ED;
}
.slider > ul > li.slide-3{
	background-color: #47D7ED;
}

.slider > .slider-arrow-prev,
.slider > .slider-arrow-next {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 300;
}
.slider > .slider-arrow-prev > label,
.slider > .slider-arrow-next > label {
	position: absolute;
	width: 5vw;
	height: 5vw;
	margin-top: -2.5vw;
	opacity: 0;
	background-size: 100% auto;
	background-position: center;

	z-index: -1;
  	transition: all 0.5s ease;
}
.slider > #input-slide-0:checked ~ .slider-arrow-prev > label.slide-3,
.slider > #input-slide-0:checked ~ .slider-arrow-next > label.slide-1, 
.slider > #input-slide-1:checked ~ .slider-arrow-prev > label.slide-0,
.slider > #input-slide-1:checked ~ .slider-arrow-next > label.slide-2, 
.slider > #input-slide-2:checked ~ .slider-arrow-prev > label.slide-1,
.slider > #input-slide-2:checked ~ .slider-arrow-next > label.slide-3, 
.slider > #input-slide-3:checked ~ .slider-arrow-prev > label.slide-2,
.slider > #input-slide-3:checked ~ .slider-arrow-next > label.slide-0 {
	z-index: 1;
}

.slider > .slider-dot {
	position: relative;
	margin-top: -4vw;
	text-align: center;
	z-index: 300;
	font-size: 0;
}
.slider > .slider-dot > label {
	position: relative;
	display: inline-block;
	margin: 1vw 0.5vw;
	width: 1vw;
	height: 1vw;
	border-radius: 50%;

	background-color: #FFF;
}
.slider > #input-slide-0:checked ~ .slider-dot > label.slide-0,
.slider > #input-slide-1:checked ~ .slider-dot > label.slide-1,
.slider > #input-slide-2:checked ~ .slider-dot > label.slide-2,
.slider > #input-slide-3:checked ~ .slider-dot > label.slide-3 {
	background-color: black;
}
.slider > .slider-dot > label:hover{
	background-color: #F73C3F !important;
}
.slider > .slide-description{
	position: absolute;
	width: 50%;
	top: calc(50% - 3vw);
	left: 25%;
	z-index: 200;
}
.slider > .slide-description > label{
	position: absolute;
	width: 100%;
	top: 0;	
	left: 0;
  cursor: default;

	z-index: 0;
	opacity: 0;
	visibility: hidden;
  	transition: all 0.75s ease;	
}
.slider > #input-slide-0:checked ~ .slide-description > .slide-0,
.slider > #input-slide-1:checked ~ .slide-description > .slide-1,
.slider > #input-slide-2:checked ~ .slide-description > .slide-2,
.slider > #input-slide-3:checked ~ .slide-description > .slide-3{
	z-index: 2;
	opacity: 1;
	visibility: visible;	
}
.slider > .slide-description > label > .text-slide{
	margin: 0 auto;
	line-height: 6vw;
	text-align: center;
}



@keyframes slide{
	0%, 100% { opacity: 0; }
	6%, 25% { opacity: 1; z-index: 2; }
	30%, 50% { opacity: 0; z-index: 2; }
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-0{
	animation: slide 32000ms infinite -2000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-1{
	animation: slide 32000ms infinite 6000ms linear;	
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-2{
	animation: slide 32000ms infinite 14000ms linear;	
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-3{
	animation: slide 32000ms infinite 22000ms linear;	
}
.slider > #input-slide-autoplay:checked ~ ul > li{
	transition: none;	
}


@keyframes arrow {
	0%, 24% { z-index: 1; }
	25%, 100% { z-index: -1; }
}
.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-3,
.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-1{
	animation: arrow 32000ms infinite -2000ms;	
}
.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-0,
.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-2{
	animation: arrow 32000ms infinite 6000ms;	
}
.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-1,
.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-3{
	animation: arrow 32000ms infinite 14000ms;	
}
.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-2,
.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-0{
	animation: arrow 32000ms infinite 22000ms;	
}


@keyframes dot {
	0%, 24%	{ background-color: #333; }
	25%, 100% { background: #FFF; }
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-0{
	animation: dot 32000ms infinite -2000ms;	
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-1{
	animation: dot 32000ms infinite 6000ms;	
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-2{
	animation: dot 32000ms infinite 14000ms;	
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-3{
	animation: dot 32000ms infinite 22000ms;	
}


@keyframes description{
	0%, 5% { opacity: 0; z-index: 2; visibility: visible; }
	6%, 24% { opacity: 1; z-index: 2; visibility: visible; }
	25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-0{
	animation: description 32000ms infinite -2000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-1{
	animation: description 32000ms infinite 6000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-2{
	animation: description 32000ms infinite 14000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-3{
	animation: description 32000ms infinite 22000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > label{
  	transition: none;  	
}
.footer{
  width: 30%;
  margin: 5vw auto;
  text-align: center;
}
.footer p{
  font-family: 'Raleway', sans-serif;
  font-size: 1vw;
  color: #000;
  font-weight: normal;
  line-height: normal;
  text-transform: none;
  padding: 1vw;
}

.footer a{
  display: inline;
  text-transform: uppercase;
	font-weight: 900;
	
  
}
.footer a:hover {
	color: #F73C3F;
}

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

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

/* Code By Webdevtrick ( https://webdevtrick.com) */

@import url('https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway');

body{

width: 100%;

margin: 0 auto;

font-family: 'Raleway', sans-serif;

color: #FFF;

font-size: 1.75vw;

}

body *{

width: 100%;

position: relative;

display: block;

margin: 0 auto;

padding: 0;

text-align: center;

z-index: 100;

}

h1{

font-size: 6vw;

text-transform: uppercase;

font-weight: normal;

}

color: inherit;

text-decoration: none;

outline: 0;

}

ul,

li{

list-style: none;

}

label{

cursor: pointer;

}

input{

display: none;

}

.slider{

height: 25vw;

overflow: hidden;

}

.slider > ul {

height: 100%;

z-index: 100;

}

.slider > ul > li{

height: 100%;

position: absolute;

left: 0;

top: 0;

opacity: 0;

z-index: 1;

transition: all 2000ms ease;

}

.slider > #input-slide-0:checked ~ ul > li.slide-0,

.slider > #input-slide-1:checked ~ ul > li.slide-1,

.slider > #input-slide-2:checked ~ ul > li.slide-2,

.slider > #input-slide-3:checked ~ ul > li.slide-3{

opacity: 1;

z-index: 2;

}

.slider > ul > li.slide-0{

background-color: #47D7ED;

}

.slider > ul > li.slide-1{

background-color: #47D7ED;

}

.slider > ul > li.slide-2{

background-color: #47D7ED;

}

.slider > ul > li.slide-3{

background-color: #47D7ED;

}

.slider > .slider-arrow-prev,

.slider > .slider-arrow-next {

position: absolute;

top: 50%;

left: 0;

z-index: 300;

}

.slider > .slider-arrow-prev > label,

.slider > .slider-arrow-next > label {

position: absolute;

width: 5vw;

height: 5vw;

margin-top: -2.5vw;

opacity: 0;

background-size: 100% auto;

background-position: center;

z-index: -1;

transition: all 0.5s ease;

}

.slider > #input-slide-0:checked ~ .slider-arrow-prev > label.slide-3,

.slider > #input-slide-0:checked ~ .slider-arrow-next > label.slide-1,

.slider > #input-slide-1:checked ~ .slider-arrow-prev > label.slide-0,

.slider > #input-slide-1:checked ~ .slider-arrow-next > label.slide-2,

.slider > #input-slide-2:checked ~ .slider-arrow-prev > label.slide-1,

.slider > #input-slide-2:checked ~ .slider-arrow-next > label.slide-3,

.slider > #input-slide-3:checked ~ .slider-arrow-prev > label.slide-2,

.slider > #input-slide-3:checked ~ .slider-arrow-next > label.slide-0 {

z-index: 1;

}

.slider > .slider-dot {

position: relative;

margin-top: -4vw;

text-align: center;

z-index: 300;

font-size: 0;

}

.slider > .slider-dot > label {

position: relative;

display: inline-block;

margin: 1vw 0.5vw;

width: 1vw;

height: 1vw;

border-radius: 50%;

background-color: #FFF;

}

.slider > #input-slide-0:checked ~ .slider-dot > label.slide-0,

.slider > #input-slide-1:checked ~ .slider-dot > label.slide-1,

.slider > #input-slide-2:checked ~ .slider-dot > label.slide-2,

.slider > #input-slide-3:checked ~ .slider-dot > label.slide-3 {

background-color: black;

}

.slider > .slider-dot > label:hover{

background-color: #F73C3F !important;

}

.slider > .slide-description{

position: absolute;

width: 50%;

top: calc(50% - 3vw);

left: 25%;

z-index: 200;

}

.slider > .slide-description > label{

position: absolute;

width: 100%;

top: 0;

left: 0;

cursor: default;

z-index: 0;

opacity: 0;

visibility: hidden;

transition: all 0.75s ease;

}

.slider > #input-slide-0:checked ~ .slide-description > .slide-0,

.slider > #input-slide-1:checked ~ .slide-description > .slide-1,

.slider > #input-slide-2:checked ~ .slide-description > .slide-2,

.slider > #input-slide-3:checked ~ .slide-description > .slide-3{

z-index: 2;

opacity: 1;

visibility: visible;

}

.slider > .slide-description > label > .text-slide{

margin: 0 auto;

line-height: 6vw;

text-align: center;

}

@keyframes slide{

0%, 100% { opacity: 0; }

6%, 25% { opacity: 1; z-index: 2; }

30%, 50% { opacity: 0; z-index: 2; }

}

.slider > #input-slide-autoplay:checked ~ ul > li.slide-0{

animation: slide 32000ms infinite -2000ms linear;

}

.slider > #input-slide-autoplay:checked ~ ul > li.slide-1{

animation: slide 32000ms infinite 6000ms linear;

}

.slider > #input-slide-autoplay:checked ~ ul > li.slide-2{

animation: slide 32000ms infinite 14000ms linear;

}

.slider > #input-slide-autoplay:checked ~ ul > li.slide-3{

animation: slide 32000ms infinite 22000ms linear;

}

.slider > #input-slide-autoplay:checked ~ ul > li{

transition: none;

}

@keyframes arrow {

0%, 24% { z-index: 1; }

25%, 100% { z-index: -1; }

}

.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-3,

.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-1{

animation: arrow 32000ms infinite -2000ms;

}

.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-0,

.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-2{

animation: arrow 32000ms infinite 6000ms;

}

.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-1,

.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-3{

animation: arrow 32000ms infinite 14000ms;

}

.slider > #input-slide-autoplay:checked ~ .slider-arrow-prev > label.slide-2,

.slider > #input-slide-autoplay:checked ~ .slider-arrow-next > label.slide-0{

animation: arrow 32000ms infinite 22000ms;

}

@keyframes dot {

0%, 24% { background-color: #333; }

25%, 100% { background: #FFF; }

}

.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-0{

animation: dot 32000ms infinite -2000ms;

}

.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-1{

animation: dot 32000ms infinite 6000ms;

}

.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-2{

animation: dot 32000ms infinite 14000ms;

}

.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-3{

animation: dot 32000ms infinite 22000ms;

}

@keyframes description{

0%, 5% { opacity: 0; z-index: 2; visibility: visible; }

6%, 24% { opacity: 1; z-index: 2; visibility: visible; }

25%, 100% { opacity: 0; z-index: 0; visibility: hidden; }

}

.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-0{

animation: description 32000ms infinite -2000ms ease;

}

.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-1{

animation: description 32000ms infinite 6000ms ease;

}

.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-2{

animation: description 32000ms infinite 14000ms ease;

}

.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-3{

animation: description 32000ms infinite 22000ms ease;

}

.slider > #input-slide-autoplay:checked ~ .slide-description > label{

transition: none;

}

.footer{

width: 30%;

margin: 5vw auto;

text-align: center;

}

.footer p{

font-family: 'Raleway', sans-serif;

font-size: 1vw;

color: #000;

font-weight: normal;

line-height: normal;

text-transform: none;

padding: 1vw;

}

.footer a{

display: inline;

text-transform: uppercase;

font-weight: 900;

}

.footer a:hover {

color: #F73C3F;

}

That’s It. Enjoy, Now you’ve successfully created and slider in pure HTML & CSS. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

14 COMMENTS

Denny April 27, 2019 At 8:30 am

Hi, I have seen some of the contents on this site, and overall it’s really good. However there are some HTML tag errors for this tutorial.
You put an extra tag, and there is an extra tag inside the footer. You might want to edit it.

Reply
- shaan April 27, 2019 At 9:52 am
  
  Thanks for your suggestion, maybe I had put by mistake. thank you
  
  Reply
Denny April 27, 2019 At 8:32 am

Sorry, i think the HTML tags in my previous comment isn’t displayed correctly. What I meant is:
1. You put an extra “body” tag, and
2. an extra “p” closing tag in the footer

Reply
- shaan April 27, 2019 At 9:52 am
  
  Thanks for your suggestion, maybe I had put by mistake. thank you
  
  Reply
Dinesh July 1, 2019 At 9:11 am

once i clicked the radio button, the animation stops after that. can we resume the animation/or keep the animation continue, by CSS?

Reply
Bernhard September 5, 2019 At 2:00 pm

where in the code can I set the sources for the pictures in the slider?

Bernhard

Reply
- shaan September 5, 2019 At 2:25 pm
  
  you can place images by replacing h1 tags
  
  Reply
  - Anceptus July 14, 2020 At 12:19 am
    
    Hi! By replacing the h1 tags with pictures, they become off-centered and weirdly positioned. Is there any way to fix them?
    
    Reply
jean marie September 13, 2019 At 11:36 am

if i put i puctures is not not good!what proccess? can i use

Reply
Jason November 4, 2019 At 4:34 pm

Hey shaan, i am new on webdevtrick and i just want to thank you with all my heart , for your help and your work, god bless you

Reply
- shaan November 4, 2019 At 4:55 pm
  
  Thank you very much, Please stay connected.
  
  Reply
gabrieldapintos November 12, 2019 At 3:57 pm

hello how can we add sliders please ? very intersting code thanks

Reply
Patrick Nsolo June 2, 2020 At 10:34 pm

thank you shaan

Reply
aj January 12, 2023 At 7:39 pm

how do you change if u need that for full screen

Reply