Новостной слайдер на Bootstrap — стиль 23

Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №23 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.

Jan 5, 2016

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.

• Mockups,
• Graphics

Jan 7, 2016

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.

• Mockups,
• Graphics

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="news-slider" class="owl-carousel">
                <div class="post-slide">
                    <div class="post-img">
                        <a href="#" class="over-layer"><img src="images/img-1.jpg" alt=""></a>
                    </div>
                    <div class="post-content">
                        <span class="post-date">Jan 5, 2016</span>
                        <h3 class="post-title"><a href="#">Lorem ipsum dolor sit</a></h3>
                        <p class="post-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                        </p>
                        <ul class="post-bar">
                            <li><a href="#">Mockups</a>,</li>
                            <li><a href="#">Graphics</a></li>
                        </ul>
                    </div>
                </div>
 
                <div class="post-slide">
                    <div class="post-img">
                        <a href="#" class="over-layer"><img src="images/img-2.jpg" alt=""></a>
                    </div>
                    <div class="post-content">
                        <span class="post-date">Jan 7, 2016</span>
                        <h3 class="post-title"><a href="#">Lorem ipsum dolor sit</a></h3>
                        <p class="post-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis.
                        </p>
                        <ul class="post-bar">
                            <li><a href="#">Mockups</a>,</li>
                            <li><a href="#">Graphics</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.post-slide{
    margin: 0 15px;
}
.post-slide .post-img{
    position: relative;
    overflow: hidden;
}
.post-slide .over-layer:before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:rgba(255, 255, 255,0);
    transition: all 0.50s ease 0s;
}
.post-img:hover .over-layer:before{
    background:rgba(255, 255, 255,0.6);
}
.post-slide .post-img img{
    width: 100%;
    height:auto;
}
.post-slide .post-content{
    background:#fff;
    padding:25px 30px;
}
.post-slide .post-date{
    display: block;
    color:#808080;
    font-size: 13px;
    text-transform: uppercase;
}
.post-slide .post-title{
    margin: 15px 0 14px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}
.post-slide .post-title > a{
    color:#3c3c3c;
    transition:all 300ms linear 0s;
}
.post-slide .post-title > a:hover{
    color:#c70034;
    text-decoration: none;
}
.post-slide .post-description{
    color:#676767;
    font-size: 15px;
    line-height: 24px;
}
.post-slide .post-bar{
    padding: 0;
    list-style: none;
    text-transform: uppercase;
}
.post-slide .post-bar li{
    display: inline-block;
    font-size: 13px;
    color:#676767;
}
.post-slide .post-bar li a{
    color:#c70034;
    font-weight: bold;
}
.post-slide .post-bar li a:hover{
    text-decoration:none;
    color:#999;
}
@media only screen and (max-width: 650px){
    .post-slide{ margin-left: 0; }
}

$(document).ready(function() {
    $("#news-slider").owlCarousel({
        items : 3,
        itemsDesktop:[1199,2],
        itemsDesktopSmall:[980,2],
        itemsMobile : [650,1],
        pagination:false,
        navigationText:false,
        autoPlay:true
    });
});