Css3 slider

Developer
Esambino Wei Cheng Hsieh
Size
3,024 Kb
Views
10,120
  1. Css3 slider Previews
  2. Css3 slider HTML Codes
  3. Css3 slider CSS Codes

How do I make an css3 slider?

What is a css3 slider? How do you make a css3 slider? This script and codes were developed by Esambino Wei Cheng Hsieh on 07 January 2023, Saturday.

Css3 slider Previews
IQ Test

Css3 slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css3 slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <input type="radio" name="radio-btn" id="img-1" checked /> <div class="slide-container">	<div class="slide"> <h2 class="slide1"> Toro<br/> y<br/> Moi </h2>	<img src="https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png" /> </div>	<div class="nav">	<label for="img-5" class="prev"></label>	<label for="img-2" class="next"></label>	</div> </div> <input type="radio" name="radio-btn" id="img-2" /> <div class="slide-container"> <div class="slide"> <img src="#" /> </div>	<div class="nav">	<label for="img-1" class="prev"></label>	<label for="img-3" class="next"></label>	</div> </div> <input type="radio" name="radio-btn" id="img-3" /> <div class="slide-container"> <div class="slide"> <img src="https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png" /> </div>	<div class="nav">	<label for="img-2" class="prev"></label>	<label for="img-4" class="next"></label>	</div> </div> <input type="radio" name="radio-btn" id="img-4" /> <div class="slide-container"> <div class="slide"> <img src="#" /> </div>	<div class="nav">	<label for="img-3" class="prev"></label>	<label for="img-5" class="next"></label>	</div> </div> <input type="radio" name="radio-btn" id="img-5" /> <div class="slide-container"> <div class="slide"> <img src="#" /> </div>	<div class="nav">	<label for="img-4" class="prev"></label>	<label for="img-1" class="next"></label>	</div> </div> <div class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> </div>
</div>
<svg width="0%" height="0%" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!--<filter id="GaussianBlurFilter"> <feGaussianBlur stdDeviation="10 1"/> </filter> --> <filter id="GrayScale"> <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /> </filter>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Css3 slider - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); { -webkit-filter: url(#GaussianBlurFilter); filter: url(#GaussianBlurFilter);
}
html, body { background: url('https://1.bp.blogspot.com/-NzYt17ULOJo/UjhW9bAElZI/AAAAAAAAA_M/Qax8LQbsauw/s1600/toro-y-moi_causers.png') center; top: 0; font-family: 'Lato', Calibri, Arial, sans-serif;
}
.container { width: 640px; height: 380px; display: block; top: 50%; left: 50%; margin-top: -190px; margin-left: -320px; position: absolute; background: black;
}
.container * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.container input { display: none; }
.slide-container { display: block; }
.slide { top: 0; opacity: 0; width: 640px; height: 380px; display: block; position: absolute; overflow: hidden; box-shadow: 0 0 5px black; -webkit-animation: moveOut 1s ease-in-out forwards;
}
.slide h2 { position: absolute; color: rgba(255,255,255,0.7); text-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 70px; line-height: 80px; opacity:0; text-transform: uppercase;
}
input:checked + .slide-container .slide h2.slide1 { left: 50px; top: 0px; opacity: 0; -webkit-animation: moveDown 1.2s ease-out 1.0s forwards;
}
.slide img { width: 100%;
}
.nav label { width: 12px; height: 12px; display: none; position: absolute; opacity: 1; z-index: 9; cursor: pointer; border-top: 4px solid rgba(255, 255, 255, .4); border-left: 4px solid rgba(255, 255, 255, .4); top: 180px; -webkit-transition: all 0.6s ease-in-out;
}
.prev { left: 20px; -webkit-transform: rotate(-45deg);
}
.prev:hover { -webkit-animation: moveLeft 0.1s ease-in forwards;
}
.next { right: 20px; -webkit-transform: rotate(135deg);
}
.next:hover { -webkit-animation: moveRight 0.1s ease-in forwards;
}
input:checked + .slide-container .slide { -webkit-animation: moveIn 1s ease-in-out forwards;
}
input:checked + .slide-container .nav label { display: block;
}
.nav-dots {	width: 200px; height: 30px; left: 220px; line-height: 30px;	bottom: 10px; border-radius: 20px; margin: 0 auto;	position: absolute;	text-align: center; background: rgba(255,255,255,0.1); box-shadow: inset 0 0px 6px rgba(0,0,0,0.5);
}
.nav-dot {	width: 12px;	height: 12px;	margin: 0 5px;	position: relative;	border-radius: 100%; border: 0px solid white;	display: inline-block;	background-color: #111;
}
.nav-dot:hover {	cursor: pointer;	background-color: rgba(255, 255, 255, 1);
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5 {	background: rgba(255, 255, 255, 1);
}
@-webkit-keyframes moveIn { 0% {opacity:0;} 100% {opacity:1;}
}
@-webkit-keyframes moveOut { 0% {opacity:1;} 100% {opacity:0;}
}
@-webkit-keyframes moveLeft { 0% {left:20px;} 100% {left:15px;}
}
@-webkit-keyframes moveRight { 0% {right:20px;} 100% {right:15px;}
}
@-webkit-keyframes moveDown { 0% {top:80px; opacity:0;} 100% {top:40px; opacity:1;}
}
Css3 slider - Script Codes
Css3 slider - Script Codes
Home Page Home
Developer Esambino Wei Cheng Hsieh
Username Esambino
Uploaded January 07, 2023
Rating 3
Size 3,024 Kb
Views 10,120
Do you need developer help for Css3 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!

Esambino Wei Cheng Hsieh (Esambino) Script Codes
Name
CSS3 Latte Art Logo
Addthis_button
0000
Three test
Tribute to Rorschach
Practice hover
Open
My three.js practice
CSS3 Slider Practice
Colorful card
Create amazing captions 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!