<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrap">
<div class="shape"></div>
<div class="shape2">This will be where you can place the text to go down the right hand side of the slider</div>
<div class="slider">
<div class="slide">
<img src="http://lorempixel.com/800/600" />
<h1>Slide 1</h1>
<p>Text to do with slide 1</p>
</div>
<div class="slide">
<img src="http://lorempixel.com/600/400" />
<h1>Slide 2</h1>
<p>Text to do with slide 2</p>
</div>
<div class="slide">
<img src="http://lorempixel.com/1200/800" />
<h1>Slide 3</h1>
<p>Text to do with slide 3</p>
</div>
<div class="slide">
<img src="http://lorempixel.com/1800/1200" />
<h1>Slide 4</h1>
<p>Text to do with slide 4</p>
</div>
</div>
</div>
.wrap {
position:relative;
height:400px;
width:100%;
margin:0 auto;
max-width:1024px;
}
.shape {
position:absolute;
top:0;
left:0;
height:100%;
width:50%;
overflow:hidden;
z-index:10;
}
.shape:after {
content:"";
position:absolute;
top:10%;
left:0;
width:100%;
height:90%;
border-radius:0 50% 0 0;
box-shadow: 0 0 0 999px lightgray;
}
.shape2 {
position:absolute;
top:0;
left:50%;
height:100%;
width:50%;
background:lightgray;
border-radius:0 0 0 50%;
z-index:10;
box-shadow: 20px 10px 20px 5px black;
}
/*Slider*/
.slider {
position: absolute;
height: 90%;
width: 70%;
top:10%;
left:10px;
overflow: hidden;
z-index:0;
}
.slide, .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height:300px;
}
.slide h1 {
position: absolute;
top: 200px;
right: 40%;
height: 10%;
color: white;opacity:0;
animation: h1slide 5s infinite;
}
.slide p {
position: absolute;
top: 250px;opacity:0;
left: 0;
height: 60%;
color: white;
animation: pslide 5s infinite;
}
.slide {
transform: translateX(100%);
animation: slide 20s infinite linear;
}
.slide:nth-child(2) {
animation-delay: 5s;
}
.slide:nth-child(3) {
animation-delay: 10s;
}
.slide:nth-child(4) {
animation-delay: 15s;
}
@keyframes slide {
5% {
transform: translateX(0);
}
25% {
transform: translateX(0);
}
30% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes h1slide{
0% {
opacity:0;
right:40%;
}
5%{opacity:1;}
25% {
right:40%;
}
30% {
right:80%;
}
95% {
right:85%;opacity:1;
}
100%{opacity:0;}
}
@keyframes pslide{
0% {
left: 0;opacity:0;
}
5%{opacity:1;}
25% {
left: 0;
}
30% {
left: 20%;
}
95% {
left: 25%;opacity:1;
}
100%{opacity:0;}
}
/******************************/
html, body {
margin:0;
padding:0;height:100%;
vertical-align:top;overflow:hidden;
background: rgb(79, 79, 79);
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
