Pure CSS Responsive Slider

Developer
Jeff Scott Ward
Size
5,404 Kb
Views
66,792
  1. Pure CSS Responsive Slider Previews
  2. Pure CSS Responsive Slider HTML Codes
  3. Pure CSS Responsive Slider CSS Codes
  4. Pure CSS Responsive Slider JS Codes

How do I make an pure css responsive slider?

What is a pure css responsive slider? How do you make a pure css responsive slider? This script and codes were developed by Jeff Scott Ward on 28 August 2022, Sunday.

Pure CSS Responsive Slider Previews
IQ Test

Pure CSS Responsive Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Responsive Slider</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> - var slideCount = 5;
article#slider - for (var i = 1; i <= slideCount; i++) input#slide1(id="slide#{i}", type='radio', name='slider', selected='false') #slides #overflow .inner - for (var x = 1; x <= slideCount; x++) article img(src='http://csscience.com/responsiveslidercss3/CouldDragonByBjzaba.png') #controls - for (var b = 1; b <= slideCount; b++) label(for='slide#{b}') #active - for (var c = 1; c <= slideCount; c++) label(for='slide#{c}') <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Responsive Slider - Script Codes CSS Codes

ol, ul { list-style: none;
}
body { font: 14px/22px Arial, Helvetica, sans-serif; color: #333; background: #ddd; margin: 50px auto; overflow-x: hidden; padding: 0 20px;
}
#slider { text-align: center;
}
h2 { margin: 40px 0 25px; border-bottom: 1px solid #bbb; padding: 0 0 10px;
}
p { margin: 0 0 16px;
}
strong { font-weight: bold;
}
label, a { color: teal; cursor: pointer; text-decoration: none;
}
label:hover, a:hover { color: #000 !important;
}
* { box-sizing: border-box;
}
label, #active, img { -moz-user-select: none; -webkit-user-select: none;
}
#slider { margin: 0 auto;
}
/* NEW EXPERIMENT */
/* Slider Setup */
input { display: none;
}
#slide1:checked ~ #slides .inner { margin-left: 0;
}
#slide2:checked ~ #slides .inner { margin-left: -100%;
}
#slide3:checked ~ #slides .inner { margin-left: -200%;
}
#slide4:checked ~ #slides .inner { margin-left: -300%;
}
#slide5:checked ~ #slides .inner { margin-left: -400%;
}
#overflow { width: 100%; overflow: hidden;
}
article img { width: 100%;
}
#slides .inner { width: 500%; line-height: 0;
}
#slides article { width: 20%; float: left;
}
/* Slider Styling */
/* Control Setup */
#controls { margin: -25% 0 0 0; width: 100%; height: 50px;
}
#controls label { display: none; width: 50px; height: 50px; opacity: 0.3;
}
#active { margin: 23% 0 0; text-align: center;
}
#active label { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block; width: 10px; height: 10px; background: #bbb;
}
#active label:hover { background: #ccc; border-color: #777 !important;
}
#controls label:hover { opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) { background: url("http://csscience.com/responsiveslidercss3/next.png") no-repeat; float: right; margin: 0 -70px 0 0; display: block;
}
#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4) { background: url("http://csscience.com/responsiveslidercss3/prev.png") no-repeat; float: left; margin: 0 0 0 -70px; display: block;
}
#slide1:checked ~ #active label:nth-child(1), #slide2:checked ~ #active label:nth-child(2), #slide3:checked ~ #active label:nth-child(3), #slide4:checked ~ #active label:nth-child(4), #slide5:checked ~ #active label:nth-child(5) { background: #333; border-color: #333 !important;
}
/* Info Box */
.info { line-height: 20px; margin: 0 0 -150%; position: absolute; font-style: italic; padding: 30px 30px; opacity: 0; color: #000; text-align: left;
}
.info h3 { color: #333; margin: 0 0 5px; font-weight: normal; font-size: 22px; font-style: normal;
}
/* Slider Styling */
#slides { margin: 45px 0 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 1px 1px 4px #666; padding: 1%; background: #fff; background: #fcfff4; /* Old browsers */ background: -moz-linear-gradient(top, #fcfff4 0%, #dbdac9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfff4), color-stop(100%, #dbdac9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fcfff4 0%, #dbdac9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fcfff4 0%, #dbdac9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fcfff4 0%, #dbdac9 100%); /* IE10+ */ background: linear-gradient(top, #fcfff4 0%, #dbdac9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
}
#slides .inner { transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
/* Animation */
#slider { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;
}
#controls label { -webkit-transform: translateZ(0); -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out;
}
#slide1:checked ~ #slides article:nth-child(1) .info, #slide2:checked ~ #slides article:nth-child(2) .info, #slide3:checked ~ #slides article:nth-child(3) .info, #slide4:checked ~ #slides article:nth-child(4) .info, #slide5:checked ~ #slides article:nth-child(5) .info { opacity: 1; transition: all 1s ease-out 0.6s;
}
.info, #controls, #slides, #active, label, .info h3 { transition: all 0.5s ease-out;
}
#slider #controls { margin: -25% 0 0 15%; width: 70%; height: 50px;
}
#slider #controls label { transform: scale(0.8);
}
#slider #controls #slides { padding: 1% 0; border-radius: 0px;
}
#slider #controls #active { margin: 22% 0 0;
}

Pure CSS Responsive Slider - Script Codes JS Codes

(function() { $('#active label:nth-child(1)').click();
}).call(this);
Pure CSS Responsive Slider - Script Codes
Pure CSS Responsive Slider - Script Codes
Home Page Home
Developer Jeff Scott Ward
Username jeffscottward
Uploaded August 28, 2022
Rating 4
Size 5,404 Kb
Views 66,792
Do you need developer help for Pure CSS Responsive Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Scott Ward (jeffscottward) Script Codes
Name
Panning Wall Tiles
A Pen by Jeff Scott Ward
Iso-Metric Snake
Object Oriented SASS Framework
Trader Phone APP UI
Lab 49 Logo Animated
3D Hexagon Text Roller
Sprite Animation
Impress JS Algorhytmic Generator
XBOX 360 UI
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!