<section class="background__degraded">
<div class="container">
<article class="slider__page">
<h1 class="slider__page__title">
Esto es un ejemplo de un slider de imagenes
</h1>
<div id="slideshow" class="slider">
<div class="slider__item">
<img class="slider__image" src="https://s3-us-west-2.amazonaws.com/devcode/img/topics/javascript@2x.png" alt="" />
<h3 class="slider__title">
Curso de JavaScript
</h3>
</div>
<div class="slider__item">
<img class="slider__image" src="https://s3-us-west-2.amazonaws.com/devcode/img/topics/html@2x.png" alt="" />
<h3 class="slider__title">
Curso de HTML y CSS
</h3>
</div>
<div class="slider__item">
<img class="slider__image" src="https://s3-us-west-2.amazonaws.com/devcode/img/topics/angular@2x.png" alt="" />
<h3 class="slider__title">
Curso de Angular
</h3>
</div>
<div class="slider__item">
<img class="slider__image" src="https://s3-us-west-2.amazonaws.com/devcode/img/topics/android@2x.png" alt="" />
<h3 class="slider__title">
Curso de Android
</h3>
</div>
</div>
</article>
</div>
</section>
.body {
margin: 0;
padding: 0;
}
.background__degraded {
background-image: linear-gradient(90deg, #1F2A64, #4D62CE);
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 15px;
}
.slider__page {
padding: 15px 0 150px 0;
}
.slider__page__title {
color: #fff;
font-size: 25px;
text-align: center;
font-weight: 400;
text-transform: uppercase;
}
.slider {
margin: 0px auto;
position: relative;
width: 200px;
height: 100%;
padding: 30px 0 0 0;
text-align: center;
}
.slider__image {
width: 100px;
height: 100px;
}
.slider__title {
color: #fff;
font-size: 16px;
text-align: center;
font-weight: 200;
}
.slider__item {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
display: none;
}
.slider__item:first-child {
display: block;
}
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 3000);
This Pen doesn't use any external CSS resources.