I found this slider in JSFiddle on https://www.cssscript.com/demo/full-width-horizontal-page-slider-with-pure-html-css/ and I have changed it little bit.
I am trying to slide the sections automatically every 5 seconds in a loop. Currently, it slides down every 5 seconds but if you just visit the page and click Section Four on the header in 3rd second, after 2 seconds later it will bring you to 2nd slide but actually it should've brought you to 1st section.
I have tried to find something on thus but unfortunately, my knowledge on this very limited. Your help is much appreciated.
JSFiddle
<!doctype html>
<html>
<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>slider</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
</style>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
var variableToCancelInterval = setInterval(function () {
$(".slide2").click();
}, 5000);
var variableToCancelInterval = setInterval(function () {
$(".slide3").click();
}, 10000);
var variableToCancelInterval = setInterval(function () {
$(".slide4").click();
}, 15000);
var variableToCancelInterval = setInterval(function () {
$(".slide1").click();
}, 20000);
</script>
</body>
</html>
You can use setInterval() like this
var i = 0;
$('.btn').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
i = $(this).index() + 1;
});
var Interval = setInterval(function(){
i = (i === $('.btn').length) ? 1 : i + 1;
$('.btn.slide'+i).click();
} , 5000);
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.page-slider {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}
header label:hover { background: #2e353b; }
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}
.slide-one { background-image: url(https://unsplash.it/1800/1200?image=222); }
.slide-two { background-image: url(https://unsplash.it/1800/1200?image=333); }
.slide-three { background-image: url(https://unsplash.it/1800/1200?image=444); }
.slide-four { background-image: url(https://unsplash.it/1800/1200?image=555); }
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}
.btn.active{
background : #62ce36;
color : #fff;
}
<!doctype html>
<html>
<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>slider</title>
</head>
<body>
<div class="page-slider">
<header>
<label class="btn slide1 active" for="slide-1-trigger">Section One</label>
<label class="btn slide2" for="slide-2-trigger">Section Two</label>
<label class="btn slide3" for="slide-3-trigger">Section Three</label>
<label class="btn slide4" for="slide-4-trigger">Section Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Full Width Horizontal Page Slider Demo</h1>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Section Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Section Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Section Four</h1>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
</script>
</body>
</html>
Related
I am working on a project and I want to make it look as sleek as possible, I want the website to look beautiful while also being responsive and functioning, I am trying to animate text emelents to appear so that when you scroll to them, they slide in from the sides, or something like that, I have tried Fireship's method but thtat does not seem to be working.
Here is my code:
#import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#700&display=swap');
html body {
background: #0e1212;
font-family: 'Roboto Mono', monospace;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
font-family: 'Roboto Mono', monospace;
}
.main {
display: grid;
justify-content: center;
min-height: 100vh;
text-align: center;
position: absolute;
top: 25%;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: #DBDBDB;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
color: #622cd8;;
transition: 0.5s;
animation-name: example;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.active {
color: #808080;
}
.active:hover {
color: #808080;
animation-name: active;
}
#keyframes active {
0% {
color: #808080;
}
100% {
color: #808080;
}
}
#keyframes example {
0% {
color: #DBDBDB;
}
100% {
color: #622cd8;
}
} .hidden{
opacity: 0;
filter: blur(5px);
transform: translateX(-100%);
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css">
<script src='script.js'> </script>
<title>Home</title>
</head>
<body>
</head>
<body>
<ul id='menu' >
<li><a class="active" href="#home" id="home">.home()</a></li>
<li><a class="inactive" href="#news">.about()</a></li>
<li><a class="inactive" href="#contact">.stuffs()</a></li>
<li><a class="inactive" href="#about">.apply()</a></li>
</ul>
<div class="main">
<section>
<h1 style="text-align: center; color:#DBDBDB; font-size: 100px" >cosmic<span style="color: #622cd8">.club()</span></h1>
<p style="font-size: 25px; color: #ABACAC; position: relative; top: -5%">a modern, advanced, and minimalistic web service</p>
</section>
<section>
<h1>More</h1>
<p>this is also a centered section</p>
</section>
</div>
</body>
</html>
Can I use pure CSS or do I have to use Javascript
html file :
<section>
<div class="container reveal">
<div class="text-container">
<p>
Lorem ipsum dolor sit amet consectetur .
</p>
</div>
</div>
</section>
CSS file:
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: 1s all ease;
}
.reveal.active{
transform: translateY(0);
opacity: 1;
}
js file:
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
So I have made a simple HTML and CSS website with the background image currently set as the ocean picture.
Here is the code for this website
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li>Cooking</li>
<li>Writing</li>
<li>Creative</li>
<li>Photography</li>
</ul>
</div>
<div class="title">
<h1>Nila Palmo Ram</h1>
</div>
<div class="button">
ARTICLES
ARTWORK
</div>
</header>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: Century Gothic; }
header{
background-image: url(../2.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
ul li.active a{
background-color: #fff;
color: rgb(115, 196, 233);
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 10%;
left: 20%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
For this website I want the background image to be a slider showing three images. I have built the slider separately. Here is the code for the slider:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website2</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for(i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if(slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
CSS:
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
Could someone please tell me how I can make the slider of pictures the background of my website?
Thank you!
Make use of position:absolute and set the container height and width to 100%. (I used vh & vw to take the device/view height and width).
I hope you can take it forward. Cheers!!!
// no change here
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
/* added */
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
/* added */
.mySlides img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!-- image urls changed -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1422246654994-34520d5a0340?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1523706120980-3f90ca135ad6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
I am trying to place quote1.jpg next to yoda.png, but no matter where I place the div class it ends up somewhere else. First it was on top of the header now it is covering up Yoda. When you hover your mouse over Yoda it is supposed to show his quote but instead it shows the quote.jpg. All I am trying to do is place the quote.jpg next to Yoda.
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 2;
}
.text {
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
/* No matter what I do I cannot
place the quote1.jpg in the correct place */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class= "container">
<img src="yoda.png" alt="Yoda"
class= "image" style = "width:50%">
<div class="text">That right, you got.
Herh herh herh.
<div class ="middle">
<img src="quote1.jpg" alt="quote">
</div>
</body>
</html>
It is easier to use javascript or jquery to implement what you intend.
Here is a sample code:
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.text {
display:block;
opacity: 0;
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
.flex-container {
display: flex;
flex-flow:row wrap;
}
.block{
display: block;
background: red;
margin: 10px;
padding: 10px;
width:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function show() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
function hide() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
</script>
</head>
<body>
<div class="header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class="parent">
<div class="flex-container">
<div class="block yoda-div" id="yoda">
<img src="yoda.png" alt="Yoda" class="image" onmouseover="show()">
<div class="text" onmouseout="hide()">That right, you got.
Herh herh herh.
</div>
</div>
<div class="block" id="quote">
<img src="quote1.jpg" alt="quote">
</div>
</div>
</div>
</body>
</html>
Hello if I understood your question, this might be of help.
.container {
display: flex;
flex-direction: row
flex-wrap: wrap;
}
.custom-img {
height: 45vh;
width: 100%;
object-fit: cover
}
.sections {
position: relative;
margin: 2px;
border: 1px solid green
}
.section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background-color: #000;
padding: 2px;
font-size: 18px
}
<div class="container">
<div class="sections">
<div class="section-text">This is the left section</div>
<img class="custom-img" src="https://slicedinvoices.com/wp-content/uploads/edd/2015/12/better-urls.jpg" />
</div>
<div class="sections">
<div class="section-text">This is right section</div>
<img class="custom-img" src="https://yazoogle.com.au/wp-content/uploads/2017/04/urls.jpg" />
</div>
</div>
Hope this helps
Move your quote1 div below the yoda img tag.
2.Modify your following css classes
.middle {
transition: .5s ease;
opacity: 0;
display: inline;
transform: translate(-50%, -50%);
}
.image {
opacity: 1;
display: inline;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
Is it possible to create a slideshow using HTML with CSS? Similar to the slideshows created by Powerpoint, except in code.
You can do it like that in your HTML file.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
Or you can go to W3 school to try it yourself.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr
you can use only slider with html and css:
<div class="slider-container">
<div class="menu">
<label for="slide-dot-1"></label>
<label for="slide-dot-2"></label>
<label for="slide-dot-3"></label>
</div>
<input id="slide-dot-1" type="radio" name="slides" checked>
<div class="slide slide-1"></div>
<input id="slide-dot-2" type="radio" name="slides">
<div class="slide slide-2"></div>
<input id="slide-dot-3" type="radio" name="slides">
<div class="slide slide-3"></div>
</div>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
}
img {
max-width: 100%;
}
.slider-container{
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 .2em 1em;
&:hover {
background: red;
}
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s .75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left .65s ease-out;
}
.slide-1 {
background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900");
}
.slide-2 {
background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900");
}
.slide-3 {
background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900");
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('jupiter.jpg');
}
.slide-two {
background-image: url('neptune.jpg');
}
.slide-three {
background-image: url('mars.jpg');
}
.slide-four {
background-image: url('moon.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=" 1 "/>
<link rel="stylesheet " type="text/css " href="main1.css " />
</head>
<body>
<div class="wrap ">
<header>
<label for="slide-1-trigger ">Slide One</label>
<label for="slide-2-trigger ">Slide Two</label>
<label for="slide-3-trigger ">Slide Three</label>
<label for="slide-4-trigger ">Slide Four</label>
</header>
<input id="slide-1-trigger " type="radio " name="slides " checked/>
<section class="slide slide-one ">
<h1>Headline One</h1>
<video width="250 " height="170 " controls>
<source src="jupitergif.webm " type="video/webm ">
</source>
</video>
</section>
<input id="slide-2-trigger " type="radio " name="slides " />
<section class="slide slide-two ">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger " type="radio " name="slides " />
<section class="slide slide-three ">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger " type="radio " name="slides " />
<section class="slide slide-four ">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>
I am having trouble styling the video so that it is in the bottom right corner of the page. Also, how can I make the video autoplay on a loop? Also, how can I get rid of any play/maximize icons on the video? The video is in section class slide slide-one. Much appreciated.
Add autoplay and loop attributes to <video> and remove controls. The <source> void element which doesn't have an end tag </source>
<video width="250" height="170" autoplay loop>
For placing the video in the bottom right corner use:
video {
z-index: 10000;
position:fixed;
bottom:0;
right:0;
}
BTW keep your format consistent all of the right quotes have a space before them, remove those spaces.
SNIPPET
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
background-size: cover;
position: relative;
overflow: hidden;
background: #000;
color: #000;
text-align: center;
font-family: Arial, san-serif;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .677em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2E353B;
}
h1 {
font-size: 300%;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
}
.slide-one {
background-image: url('https://pbs.twimg.com/profile_images/628266121313947648/Zk_c8qnD.jpg');
}
.slide-two {
background-image: url('https://dperkins.org/gal/2014/thumb/2014-10-06.18.Neptune.jpg');
}
.slide-three {
background-image: url('https://at-cdn-s01.audiotool.com/2011/10/04/documents/FHCjD1iBHjEiCESy8ubgBopVfNr/0/cover256x256-dd1bb728ff564ec69ededd71b2ba4ada.jpg');
}
.slide-four {
background-image: url('https://is5-ssl.mzstatic.com/image/thumb/Purple71/v4/82/42/9a/82429a1b-a489-d421-5ec2-cb38613b54f4/source/256x256bb.jpg');
}
[id^="slide"]:checked+.slide {
left: 0;
z-index: 100;
}
video {
z-index: 10000;
position:fixed;
bottom:0;
right:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pure CSS Horizontal Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrap">
<header>
<label for="slide-1-trigger">Slide One</label>
<label for="slide-2-trigger">Slide Two</label>
<label for="slide-3-trigger">Slide Three</label>
<label for="slide-4-trigger">Slide Four</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked/>
<section class="slide slide-one">
<h1>Headline One</h1>
<video width="250" height="170" autoplay loop>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/webm">
</video>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Headline Two</h1>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Headline Three</h1>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Headline Four</h1>
</section>
</div>
</body>
</html>