Tuesday, 9 May 2017
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
------------------------------------------------------------------------------------------------------------
Read More:
https://codepen.io/macbobbitt_/pen/jmEBL
https://codepen.io/dudleystorey/pen/ehKpi
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<style class="cp-pen-styles">
#slider-wrapper {
width: 940px;
height: 470px;
margin: 50px auto;
position: relative;
margin-bottom: 0px;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
#s1 {
padding: 6px;
background: #ff2800;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s2 {
padding: 6px;
background: #7bd51b;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s3 {
padding: 6px;
background: #000088;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s4 {
padding: 6px;
background: #FFD700;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.inner-wrapper {
width: 940px;
height: 470px;
position: absolute;
top: 0;
left: 0;
margin-bottom: 0px;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .overflow-wrapper {
margin-left: 0%;
}
#Slide2:checked ~ .overflow-wrapper {
margin-left: -100%;
}
#Slide3:checked ~ .overflow-wrapper {
margin-left: -200%;
}
#Slide4:checked ~ .overflow-wrapper {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.slide img {
width: 25%;
float: left;
}
.overflow-wrapper {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s
ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
animation: 30s slidy infinite;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
</style>
</head>
<body>
<div id="slider-wrapper">
<div class="inner-wrapper">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="overflow-wrapper">
<a class="slide" href=""><img src="https://dummyimage.com/600x400/ff2800/000.png&text=1" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/7bd51b/000.png&text=2" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/000088/FFD700.png&text=3" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/FFD700/000.png&text=4" /></a>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------
USE ONE IMAGE IN KEY FRAME SLIDERNEED 4 IMAGES ADD INTO ONE IMAGE
IMAGE SIZE W:800 X H: 400
--------------------------------------------------------------------------
--------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
#slideshow{
position: relative;
width: 200px;
height: 400px;
overflow: hidden;
border: 5px solid #fff;
}
#slideshow img{
position: absolute;
left: 0;
top: 0;
animation: slide 5s infinite;
}
@keyframes slide{
0%{ transform:translateX(0px) }
25%{ transform:translateX(-200px) }
50%{ transform:translateX(-400px) }
75%{ transform:translateX(-600px) }
100%{ transform:translateX(0px) }
}
</style>
</head>
<body>
<div id="slideshow">
<img src="http://oi67.tinypic.com/24mia39.jpg">
</div>
</body>
</html>
--------------------------------------------------------------------------
OR USE THIS CSS CODE
--------------------------------------------------------------------------
<html>
<head>
<style class="cp-pen-styles">
#slider-wrapper {
width: 940px;
height: 470px;
margin: 50px auto;
position: relative;
margin-bottom: 0px;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
#s1 {
padding: 6px;
background: #ff2800;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s2 {
padding: 6px;
background: #7bd51b;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: -12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s3 {
padding: 6px;
background: #000088;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 12px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s4 {
padding: 6px;
background: #FFD700;
position: absolute;
left: 50%;
bottom: 25px;
margin-left: 36px;
border-radius: 20px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.inner-wrapper {
width: 940px;
height: 470px;
position: absolute;
top: 0;
left: 0;
margin-bottom: 0px;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .overflow-wrapper {
margin-left: 0%;
}
#Slide2:checked ~ .overflow-wrapper {
margin-left: -100%;
}
#Slide3:checked ~ .overflow-wrapper {
margin-left: -200%;
}
#Slide4:checked ~ .overflow-wrapper {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.slide img {
width: 25%;
float: left;
}
.overflow-wrapper {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s
ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
animation: 20s slider infinite;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
</style>
</head>
<body>
<div id="slider-wrapper">
<div class="inner-wrapper">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="overflow-wrapper">
<a class="slide" href=""><img src="https://dummyimage.com/600x400/ff2800/000.png&text=1" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/7bd51b/000.png&text=2" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/000088/FFD700.png&text=3" /></a>
<a class="slide" href=""><img src="https://dummyimage.com/600x400/FFD700/000.png&text=4" /></a>
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------
KEY FRAME SLIDER CSS
https://codepen.io/dudleystorey/pen/ehKpi
https://github.com/VladVasiljev/Web-Design
https://github.com/VladVasiljev/Web-Design
---------------------------------------------------------------------------
<html>
<head>
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;
float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
</style>
</head>
<body>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
ReadMore:
http://qnimate.com/creating-a-slider-using-html-and-css-only/
DUMMY IMAGE GENERATOR
http://dummy-image-generator.com/
OR
https://dummyimage.com
----------------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
ReadMore:
http://qnimate.com/creating-a-slider-using-html-and-css-only/
DUMMY IMAGE GENERATOR
http://dummy-image-generator.com/
OR
https://dummyimage.com
----------------------------------------------------------------------------------------------------------------------
<html>
<!--http://qnimate.com/creating-a-slider-using-html-and-css-only/-->
<TITLE>Image Slider Using
HTML And CSS Only</TITLE>
<head>
</head>
<STYLE>
.slider-holder{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
/* IMAGE AUTO SLIDER CODE */
animation:
20s slider infinite;
}
/* IMAGE AUTO SLIDER CODE */
@keyframes
slider {
0%
{
left:
0;
}
20%
{
left:
0;
}
25%
{
left:
-100%;
}
45%
{
left:
-100%;
}
50%
{
left:
-200%;
}
70%
{
left:
-200%;
}
75%
{
left:
-300%;
}
95%
{
left:
-300%;
}
100%
{
left:
-400%;
}
}
.slider-image{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder{
left: 0px;
}
#slider-image-2:target ~ .image-holder{
left: -800px;
}
#slider-image-3:target ~ .image-holder{
left: -1600px;
}
.button-holder{
position: relative;
top: -20px;
}
.slider-change{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
</STYLE>
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<!--MAKE IMAGES WITH
http://dummy-image-generator.com/ WIDTH:800 X HEIGHT:400 -->
<img src="http://img.dummy-image-generator.com/_mono/dummy-800x400-color730046.jpg" class="slider-image" />
<img src="http://img.dummy-image-generator.com/_mono/dummy-800x400-colorBFBB11.jpg" class="slider-image" />
<img src="http://img.dummy-image-generator.com/_mono/dummy-800x400-color0096C2.jpg" class="slider-image" />
</div>
<div class="button-holder">
<!--RADIO BUTTON-->
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
PURE HTML CSS SLIDER WITHOUT JAVASCRIPT OR JQUERY
ReadMore:
http://ascii.cl/htmlcodes.htm
https://www.w3schools.com/howto/howto_css_next_prev.asp
http://seowebsitedesigning.com/pure-html-css-slider-without-javascript-or-jquery/
----------------------------------------------------------------------------------------------------------------------
PURE HTML CSS SLIDER WITHOUT JAVASCRIPT OR JQUERY
ReadMore:
http://ascii.cl/htmlcodes.htm
https://www.w3schools.com/howto/howto_css_next_prev.asp
http://seowebsitedesigning.com/pure-html-css-slider-without-javascript-or-jquery/
----------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html >
<!--
https://github.com/you-dont-need/You-Dont-Need-JavaScript/tree/master/examples
-->
<!--
http://seowebsitedesigning.com/pure-html-css-slider-without-javascript-or-jquery/
-->
<head>
<meta charset="UTF-8">
<title>PURE HTML CSS SLIDER
WITHOUT JAVASCRIPT OR JQUERY</title>
<style>
html, body {
margin: 0px auto;
padding: 0px;
background: #fecd76;
}
.carousel {
position: relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0,
0.64);
margin-top: 26px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-open:checked + .carousel-item
{
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s
ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~
.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~
.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~
.carousel-indicators li:nth-child(3) .carousel-bullet {
color: #ff0000;
}
h1, a {text-align: center;
text-decoration:none; color:#3399FF; font-weight: bold;}
</style>
</head>
<body style="max-width:940px;">
<h1>Pure HTML CSS Slider
Without JavaScript or Jquery</h1>
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="http://i0.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Stop-Double-Form-Submission-Using-Jquery-and-Ajax.jpg?w=940">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://i1.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Find-and-Remove-Duplicate-Data-From-MYSql-table.jpg?w=940">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://i2.wp.com/seowebsitedesigning.com/wp-content/uploads/2016/05/Avoid-Spammers-With-Motion-CAPTCHA-Using-JQuery.jpg?w=940">
</div>
<label for="carousel-3" class="carousel-control prev control-1">«</label>
<label for="carousel-2" class="carousel-control next control-1">»</label>
<label for="carousel-1" class="carousel-control prev control-2">«</label>
<label for="carousel-3" class="carousel-control next control-2">»</label>
<label for="carousel-2" class="carousel-control prev control-3">«</label>
<label for="carousel-1" class="carousel-control next control-3">»</label>
<ol class="carousel-indicators">
<li>
<!-- • HTML BULLET NUMBER
http://www.ascii.cl/htmlcodes.htm -->
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
<br>
<a href="http://seowebsitedesigning.com/" target="_blank">Back to Home</a>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
IMAGE SIZE 1024X768
http://basicuse.net/articles/pl/textile/html_css/simple_image_slider_with_a_responsive_design_using_only_css3#example_1
---------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
IMAGE SIZE 1024X768
http://basicuse.net/articles/pl/textile/html_css/simple_image_slider_with_a_responsive_design_using_only_css3#example_1
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Example 1 / Simple
image slider with a responsive design using only CSS3 / HTML & CSS / Markup languages / Programming
languages / Articles / BASICuse / Home - BASICuse</title>
<style type="text/css">
div#page {
width: auto;
text-align: center;
}
#image-slider {
margin: 40px 0;
display: inline-block;
height: auto;
max-width: 100%;
overflow: hidden;
position: relative;
}
#image-slider .ratio {
visibility: hidden;
}
#image-slider .image {
top: 0;
position: absolute;
z-index: 5;
opacity: 0;
left: -100%;
-webkit-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-o-transition: all linear 400ms;
transition: all linear 400ms;
}
#image-slider .ratio,
#image-slider .image {
display: block;
height: auto;
max-width: 100%;
}
#image-slider input:checked + .image {
z-index: 10;
opacity: 1;
left: 0;
}
#image-slider input {
display: none;
}
</style>
</head>
<body>
<div id="page">
<div id="image-slider">
<img src=" https://dummyimage.com/1024x768/000/fff" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide1" type="radio" checked >
<img class="image" src=" https://dummyimage.com/1024x768/000/fff" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide2" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1406/6782/file/nature2.jpg" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide3" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1407/6784/file/nature3.jpg" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide4" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1408/6786/file/nature4.jpg" alt="">
<!-- RADIO BUTTON HTML PART WITH INPUT TAG
-->
<input name="slides" id="slide5" type="radio" >
<img class="image" src="http://basicuse.net/content/download/1409/6788/file/nature5.jpg" alt="">
<div class="navigation">
<label for="slide1">1</label>
<label for="slide2">2</label>
<label for="slide3">3</label>
<label for="slide4">4</label>
<label for="slide5">5</label>
</div>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
http://stackoverflow.com/questions/42405127/css-sliding-an-image-with-radiochecked-pure-css-slider
----------------------------------------------------------------------------------------------------------------
DOG RADIO BUTTON SLIDER
IMAGE SIZE 640 X 360
---------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
Pure CSS Slider with CSS3 Keyframes
----------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
SIMPLE RADIO BUTTON SLIDER
http://stackoverflow.com/questions/42405127/css-sliding-an-image-with-radiochecked-pure-css-slider
----------------------------------------------------------------------------------------------------------------
<html>
<!--http://stackoverflow.com/questions/42405127/css-sliding-an-image-with-radiochecked-pure-css-slider-->
<TITLE>Image Slider Using
HTML And CSS Only</TITLE>
<head>
</head>
<STYLE>
img {
position: absolute;
top: 0;
left: 0;
transition: opacity .5s ease-out,
transform .5s ease-out;
transform: translateX(-100%);
/* transform: translateX(-100%)
rotate(-720deg); */ /* try this, it's nuts */
opacity: 0;
}
input:checked
+ img {
transform:
translateX(0);
/*
transform: translateX(0) rotate(0); */ /* try this with the commented line
above */
opacity:
1;
z-index:
1;
}
.controls
{
position:
absolute;
top:
0; left: 0;
z-index:
2;
}
label
{
background:
rgba(0,0,0,0.8);
color:
#fff;
padding:
.5em;
margin:
0 1em 0 0;
display:
inline-block;
cursor:
pointer;
}
</STYLE>
</head>
<body>
<div id="wrap">
<input type="radio" id="slide1" name="radio" checked>
<img src="https://dummyimage.com/560x400/000/fff" />
<input type="radio" id="slide2" name="radio">
<img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg">
<input type="radio" id="slide3" name="radio">
<img src="https://timedotcom.files.wordpress.com/2016/08/henry-winkler.jpg?quality=85">
<div class="controls">
<label for="slide1">slide1</label>
<label for="slide2">slide2</label>
<label for="slide3">slide3</label>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------DOG RADIO BUTTON SLIDER
IMAGE SIZE 640 X 360
---------------------------------------------------------------------------------------------------------------
<!doctype html>
<html lang="en">
<!--
http://www.cssscript.com/basic-image-slideshow-with-pure-css/ -->
<!--
http://www.cssscript.com/pure-css-slider-with-css3-keyframes/ -->
<head>
<style>
.slideshow {
width: 640px;
height: 360px;
position: relative;
text-align: center;
line-height: 750px;
padding-bottom: 30px;
}
.slideshow
input[type="radio"] {
font-size: .75em;
width: 1em;
height: 1em;
display: inline-block;
position: relative;
z-index: 99;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #ccc;
border-radius: 1em;
transition: .3s ease-out background,
.3s ease-out transform;
}
.slideshow
input[type="radio"]:checked {
background: #999;
outline: none;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
transform: scale(1.3);
}
.slideshow .slideshow-item {
width: 640px;
height: 360px;
line-height: 1.5;
position: absolute;
top: 0;
opacity: 0;
transition: .3s ease-out opacity;
}
.slideshow .slideshow-item label {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
display: none;
z-index: 88;
cursor: pointer;
color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slideshow .slideshow-item label:after
{
display: block;
content: '\25B6';
font-size: 2em;
color: #fff;
position: absolute;
top: 50%;
right: 10px;
margin-top: -.5em;
}
.slideshow .slideshow-item
label.previous {
left: 0;
display: block;
}
.slideshow .slideshow-item
label.previous:after {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
transform: scaleX(-1);
right: auto;
left: 10px;
}
.slideshow .slideshow-item label.next {
left: 50%;
display: block;
}
.slideshow
input[type="radio"]:checked + .slideshow-item {
opacity: 1;
}
</style>
</head>
<body>
<h1>Pure CSS slideshow</h1>
<p>A proof of concept to
have an image slideshow without javascript</p>
<div class="slideshow">
<input type="radio" name="slide" id="item-1" checked="checked" />
<div class="slideshow-item">
<img src="https://dummyimage.com/640x360/000/fff" />
<label for="item-3" class="previous">Go to slide 3</label>
<label for="item-2" class="next">Go to slide 2</label>
</div>
<input type="radio" name="slide" id="item-2" />
<div class="slideshow-item">
<img src="https://unsplash.it/640/360?image=659" />
<label for="item-1" class="previous">Go to slide 1</label>
<label for="item-3" class="next">Go to slide 3</label>
</div>
<input type="radio" name="slide" id="item-3" />
<div class="slideshow-item">
<img src="https://unsplash.it/640/360?image=649" />
<label for="item-2" class="previous">Go to slide 2</label>
<label for="item-1" class="next">Go to slide 1</label>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<!--
http://www.cssscript.com/pure-css-slider-with-css3-keyframes/ -->
<!-- https://jsfiddle.net/vzxfm7b1/2/ -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Slider with
CSS3 Keyframes</title>
<style>
* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
list-style: none;
}
body {
background: #4d6a8f
url(../images/bg-image.jpg) repeat-x;
font-family: 'Arial', sans-serif;
}
#container {
width: 718px;
overflow: hidden;
margin: 150px auto;
}
h1 {
color: #fff;
text-align: center;
margin-bottom: 20px;
}
ul.thumbs li {
float: left;
margin-bottom: 10px;
margin-right: 9px;
}
ul.thumbs a {
display: block;
position: relative;
width: 85px;
height: 55px;
border: 4px solid transparent;
font: bold 12px/25px Arial, sans-serif;
color: #515151;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(255, 255,
255, .25), inset 1px 1px 0px rgba(0,0,0, .15);
}
ul.thumbs img { border: #333 solid 4px;
}
ul.slides {
overflow: hidden;
clear: both;
border: #333 solid 4px;
}
ul.slides, ul.slides li, ul.slides a,
ul.slides img {
width: 705px;
height: 350px;
position: relative;
}
ul.slides li {
position: absolute;
z-index: 50;
}
ul.thumbs li a:hover span {
position: absolute;
z-index: 101;
bottom: -30px;
left: -22px;
display: block;
width: 100px;
height: 25px;
text-align: center;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 0px
rgba(0,0,0, .4);
-moz-box-shadow: 0px 1px 0px
rgba(0,0,0, .4);
box-shadow: 0px 1px 0px rgba(0,0,0,
.4);
background: #fff; /* older browsers */
background:
-webkit-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
background: -moz-linear-gradient(top,
#fff, 0%, #bcbcbc, 100%);
background: -o-linear-gradient(top,
#fff, 0%, #bcbcbc, 100%);
background: -ms-linear-gradient(top,
#fff, 0%, #bcbcbc, 100%);
background: linear-gradient(top, #fff,
0%, #bcbcbc, 100%);
}
ul.thumbs li a:hover span:before {
width: 0px;
height: 0px;
border-bottom: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: '';
position: absolute;
top: -5px;
left: 44px;
}
ul.thumbs li:first-child a:hover span {
left: -3px; }
ul.thumbs li:first-child a:hover
span:before { left: 25px; }
/* Animation for slider */
@-webkit-keyframes 'slide' {
0% {
left: -500px;
}
100% {
left: 0px;
}
}
ul.slides li:target {
z-index: 100;
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
/* not target */
@-webkit-keyframes 'noTarget' {
0% {
z-index: 75;
}
100% {
z-index: 75;
}
}
ul.slides li:not(:target) {
-webkit-animation-name: noTarget;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
}
</style>
</head>
<body>
<div id="container">
<h1>CSS3 Keyframes Slider
Demo</h1>
<ul class="thumbs">
<li><a href="#slide-1"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb1.jpg"><span>This is image 1</span></a></li>
<li><a href="#slide-2"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb2.jpg"><span>This is image 2</span></a></li>
<li><a href="#slide-3"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb3.jpg"><span>This is image 3</span></a></li>
<li><a href="#slide-4"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb4.jpg"><span>This is image 4</span></a></li>
<li><a href="#slide-5"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb5.jpg"><span>This is image 5</span></a></li>
<li><a href="#slide-6"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb6.jpg"><span>This is image 6</span></a></li>
<li><a href="#slide-7"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/thumb7.jpg"><span>This is image 7</span></a></li>
</ul>
<ul class="slides">
<li class="first" id="slide-1"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide1.jpg"></li>
<li id="slide-2"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide2.jpg"></li>
<li id="slide-3"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide3.jpg"></li>
<li id="slide-4"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide4.jpg"></li>
<li id="slide-5"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide5.jpg"></li>
<li id="slide-6"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide6.jpg"></li>
<li id="slide-7"><img src="http://www.cssscript.com/demo/pure-css-slider-with-css3-keyframes/images/slide7.jpg"></li>
</ul>
</div>
</body>
</html>
Related movie you might like to see :
BLOCK JAVA SCRIPT BY GOOGLE CHROME
MOUSE COORDINATES IN JAVA SCRIPT
RELATED POST WIDGET LIST WITHOUT TH...
DYNAMIC VIEWS BLOGGER TEMPLATE
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
WHACK A RAT CSS GAME
GOOGLE FILTER BUTTON IN IMAGE SEARC...
PAIR MATCHING GAME
CSS SLIDER WITHOUT JS
FLICKITY SLIDER SCROLL WITH RADIO N...
FLICKITY JS CSS SLIDER
SHOPIFY FANCY BOX
BASIC ELEVATE ZOOM PLUS
ELEVATE ZOOM JAVA SCRIPT WITH ONE I...
SHOPIFY THEME SLIDER EDIT
RELATED POST WIDGET WITH SOCIAL WID...
NEWS TICKER BLOGGER TEMPLATES
RELATED POST WIDGET FRONT SCREEN TE...
RECAPTCHA KEY CONTCAT FORM FOR BLOG...
POPULAR POST WIDGET DIFFERENT STYLE...
Related Post for RADIO BUTTON SLIDER TO KEY FRAME SLIDER
JS IMAGE SCROLLER
NOTEPAD++ REMOVE UNWANTED LINES
SEO SCORE TOOLS
SCREEN TO GIF
CSS SLIDER WITHOUT JS
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
AUTO CSS JS SLIDER WITH ARROW BULLET
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
IMAGE UPLOAD WITH JAVA WITH PHP CODE
SHARING WIDGET Add To Any For Blogger
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.