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

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

12 Sep, 2015

Aliquam rutrum

Author : admin Comments : 2 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque mi, commodo in pharetra pretium, porta eget arcu. Vivamus.

read more

<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">
                        <img src="images/img-1.jpg" alt="">
                        <span class="post-date">
                            <span class="date">12</span>
                            Sep, 2015
                        </span>
                    </div>
                    <h5 class="post-title">
                        <a href="#">Aliquam rutrum</a>
                    </h5>
                    <div class="post-bar">
                        <span class="user">
                            <i class="fa fa-user"></i>Author :
                            <a href="#">admin</a>
                        </span>
                        <span class="comment">
                            <i class="fa fa-comment"></i>Comments :
                            <a href="#">2</a>
                        </span>
                        <span class="like">
                            <a href="#"><i class="fa fa-heart-o"></i>3</a>
                        </span>
                    </div>
                    <p class="post-description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque mi, commodo in pharetra pretium, porta eget arcu. Vivamus.
                    </p>
                    <a href="#" class="readmore">read more</a>
                </div>
            </div>
        </div>
    </div>
</div>

.post-slide{
    padding: 0 15px;
}
.post-slide .post-img{
    position: relative;
}
.post-slide .post-img > img{
    width: 100%;
    height:auto;
}
.post-slide .post-date{
    position: absolute;
    bottom: 20px;
    left:20px;
    padding: 6px 8px;
    background-color: rgba(5, 5, 5, 0.7);
    font-size: 12px;
    color: #afb0b4;
}
.post-slide .post-date > .date{
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
}
.post-slide .post-title > a{
    display: block;
    color:#e67d22;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.post-slide .post-title > a:hover{
    text-decoration: none;
}
.post-slide .post-bar{
    margin-bottom: 12px;
}
.post-slide .user,
.post-slide .comment{
    color:#4d5359;
    display: inline-block;
    padding-right: 10px;
    margin-right: 12px;
}
.post-slide .user > i,
.post-slide .comment > i{
    margin-right: 5px;
}
.post-slide .user > a,
.post-slide .comment > a{
    color:#e67d22;
}
.post-slide .user > a:hover,
.post-slide .comment > a:hover,
.post-slide .like > a:hover{
    text-decoration: none;
}
.post-slide .like{
    padding-right: 10px;
    margin-right: 12px;
}
.post-slide .like > a{
    color:#e67d22;
    display: inline-block;
}
.post-slide .like > a > i{
    margin-right: 5px;
}
.post-slide .post-description{
    color:#5c5e64;
    font-size: 13px;
    line-height: 1.618;
    margin-bottom: 10px;
}
.post-slide .readmore{
    display: inline-block;
    background: #50565d;
    font-size: 12px;
    color:#fff;
    padding: 10px 13px;
    border-radius: 3px;
    text-transform: capitalize;
}
.post-slide .readmore:hover{
    color:#fff;
    text-decoration: none;
}

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