CSS slider wont Slide - html

Question

I've got a CSS slider, But I can't get it to auto slide.
I've got 4 divs of backgrounds that I'm trying to get to auto slide as a splash page for a website.
I don't know if the issue is my data cycle or am I better of finding a JS tutorial for this?
Can anyone help, please
.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100}
body
{
background: #3B242D;
font-family: 'Raleway', sans-serif;
}
html,body{height:100%; overflow: hidden}
.cycle-slideshow{position:fixed !important;top:0;bottom:0;left:0;right:0; z-index: 0}
#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%; }
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 5s slidy infinite;
}
<!-- language: lang-html -->
<div id="slider">
<figure>
<div class="cycle-slideshow">
<div class="item"
style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-1.png)">
<div class="overlay"></div>
</div>
<div class="item"
style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-2.png)">
<div class="overlay"></div>
</div>
<div class="item"
style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-3.png)">
<div class="overlay"></div>
</div>
<div class="item"
style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-4.png)">
<div class="overlay"></div>
</div>
</div>
</figure>
</div>
I have Had abit more of a play with it and Think this is a better code, However it still does'nt work.
Have I possibly got too many DIV's going on?
I dont know if its the Div Im trying to set to slide or the Keyframes?
Thank you

Answer 1

Ive solved the issue.
Instead of putting background in the HTML I did it in the css and then did an animation per slide.
<div class='slider'>
<div class='slide1'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING
DIRECTORY</h1>
<h2>
BRINGING YOU
OUR ADVANCED SEARCH TOOLBAR</h2></div>
</div>
<div class='slide2'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING
DIRECTORY</h1>
<h2>
USE #TAGS TO FIND YOUR PERFECT
IMAGES FROM OUR SUPPLIERS</h2></div>
</div>
<div class='slide3'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING
DIRECTORY</h1>
<h2>
WE’RE DOING THINGS IN A
DIFFERENT WAY</h2></div>
</div>
<div class='slide4'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING
DIRECTORY</h1>
<h2>
WITH THE SUPPORT FROM THE
BIGGEST NAMES OUT THERE</h2></div>
</div>
</div>
<div class="content">
<img class="logo-img" src="https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-logo.png" alt="" >
<div class="btnContainer">
ENTER
</div>
</div>
body
{
background: #3B242D;
font-family: 'Raleway', sans-serif;
}
h1{color:#fff; border-bottom:3px solid; border-top:3px solid;}
h2{color:#fff;}
.text{height:50%; width:30%; float:right;padding-right:5%;}
.slider{position:fixed !important;top:0;bottom:0;left:0;right:0; z-index: 0; }
.slider{background-position:inherit;background-size:cover;width:100%;height:100%; z-index: 1;}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-1-image.png)no-repeat center;
background-size: cover;
animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;
}
.slide2 {
background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-2-image.png)no-repeat center;
background-size: cover;
animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-3-image.png)no-repeat center;
background-size: cover;
animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
.slide4 {
background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/spashpage-4-image-1.png)no-repeat center;
background-size: cover;
animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
.btnContainer { margin-top: 20px; }
.btn {
display: inline-block;
background: #3B242D;
color: white;
padding: 10px 20px;
text-decoration: none;
}
.logo-img{
width: 320px;
}
.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100}
#media only screen and (max-width: 503px) {
.tag{ padding-left:30px; background-size:contain; }
.tag span{ font-size: 21px; }
.logo-img{
width: 160px;
}
h1 {
color: #fff;
border-bottom: 1px solid;
border-top: 1px solid;
font-size: 18px;
}
h2{color:#fff; font-size:14px;}
.text{height:50%; width:80%; }
}
#media only screen and (max-width: 768px){
.cycle-slideshow .item{
background-position:center center;
}
.tag.img-1 {
bottom: auto;
right: 10%;
top: 70px;
}
.logo-img {
width: 100px;
}
}
See the PEN here
https://codepen.io/Chazlie/pen/MOmdEX