slide.js v.2

slide.js after modifying the css code and using CSS3 pseudo elements and normalize script.

HTML

<link rel="stylesheet" href="http://slidesjs.com/css/font-awesome.min.css">
<script src="https://rawgithub.com/nathansearles/Slides/SlidesJS-3/source/jquery.slides.min.js"></script>
<section id="main">
<section id="slideshow">
    <div class="slide">
        <img class="thumb" src="http://lorempixel.com/470/300/">
    <article>
        <hgroup><h2><a href="#">Título del artículo</a></h2></hgroup>
        <p class="date">26/05/2016 en <a href="#">Categoría 1</a></p>
        <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel ipsum sed dolor tempus auctor. Morbi congue porttitor metus, sed ornare augue fringilla pellentesque. Quisque blandit massa quis leo scelerisque aliquet. Nullam non pellentesque risus. Quisque purus ligula, commodo quis purus ultricies, dapibus rhoncus neque. Nunc nec leo et nisl consectetur interdum quis ac sem. Nullam tincidunt tincidunt sollicitudin. Maecenas aliquet laoreet sapien, in egestas ligula vulputate in.</p>
    </article>
    </div>
    <div class="slide">
        <img class="thumb" src="http://lorempixel.com/470/300/">
    <article>
        <hgroup><h2><a href="#">Título del artículo</a></h2></hgroup>
        <p class="date">26/05/2016 en <a href="#">Categoría 1</a></p>
        <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel ipsum sed dolor tempus auctor. Morbi congue porttitor metus, sed ornare augue fringilla pellentesque. Quisque blandit massa quis leo scelerisque aliquet. Nullam non pellentesque risus. Quisque purus ligula, commodo quis purus ultricies, dapibus rhoncus neque. Nunc nec leo et nisl consectetur interdum quis ac sem. Nullam tincidunt tincidunt sollicitudin. Maecenas aliquet laoreet sapien, in egestas ligula vulputate in.</p>
    </article>
    </div>            
</section> 
 </section>

CSS

/*- Slideshow -*/
#main #slideshow{
    width: 100%;
    float: left;
    overflow: hidden;
    margin-bottom: 20px;
}

#main #slideshow .thumb{
    width: 49%;
    float: left;
    margin-right: 2%;
}

#main #slideshow article{
    float: left;
    font-size: 1rem;
    text-align: justify;
    width: 49%;
    color: #ffffff;
}

#main #slideshow article h2{
    font-size: 2rem;
    font-weight: 300;
    text-align: left;
}

#main #slideshow article .date{
    color: #e1e0be;
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: 10px;
}

#main #slideshow .slidesjs-pagination li{
    background: #ffffff;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    display: inline-block;
}

#main #slideshow .slidesjs-pagination li a{
    width: 15px;
    height: 15px;
    display: block;
    font-size: 0px;
}

#main #slideshow .slidesjs-pagination li .active{
    background: #777777;
}

#main #slideshow .slidesjs-pagination li a:hover{
    background: #96c0f5;
}  

.a{
  background:grey;}
  
.b{
  background:green;}
}

#main #article-list{ 
    clear: both; 
    width: 75%; 
    float: left; 

} 

article{ 
    margin-bottom: 40px; 
    margin-right: 4%; 
    padding-bottom: 15px; 
    border-bottom: 1px solid #333333; 
    overflow: hidden; 
} 

article .thumb{ 
    width: 35%; 
    margin-right: 4%; 
    float: left; 
    margin-bottom: 2%; 
} 

article h2{ 
    font-size: 1.5rem; 
    font-weight: 300; 
} 

article h2 a{ 
    color: #ffffff; 
} 

article h2 a:hover{ 
    color: #96c0f5; 
} 

article .extract{ 
    color: #ffffff; 
    text-align: justify; 
} 

article .date{ 
    font-size: .8rem; 
    color: #777777; 
    margin-bottom: 10px; 
}

JavaScript

$(function(){
        $("#slideshow").slidesjs({
            height: 300,
         navigation: false
    });
});