What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included in the CSS, so there's no need to add it again. You can easily run it here to see it in action.
Please run the code in full-screen mode.
HTML:
/* Cool Header Design */
#main-row102
.wrapper {
width: auto;
position: fixed;
overflow: hidden;
}
.row {
display: flex;
width: 100%;
margin: 0px;
}
.col-xs-3 {
padding: 0px;
border: 1px solid black;
display: inline-block;
width: calc(100% - 30px);
height: 340px;
background: transparent;
z-index: 1;
}
.wrapper-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index : 0;
transition: background 5s;
}
.wrapper:hover .col-xs-3 {
background: none;
}
.wrapper:hover .col-xs-3:hover {
background: red;
}
/* More CSS styles go here... */
<div id="main-row-102"></div>
<div class="wrapper">
<div class="row">
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
<div class="col-xs-3"></div>
<div class="wrapper-background"></div>
</div>
</div>