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

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

• in Graphics
• by admin

May 05, 2016

Latest News Post

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda culpa cumque dicta sint soluta voluptas eius iusto modi reprehenderit sint soluta voluptas.

read more

• in Graphics
• by admin

May 07, 2016

Latest News Post

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda culpa cumque dicta sint soluta voluptas eius iusto modi reprehenderit sint soluta voluptas.

read more

.post-slide{
    margin: 0 10px;
    border-left: 8px solid #1dcfd1;
    border-bottom: 8px solid #1dcfd1;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2);
}
.post-slide .post-img{
    position: relative;
    overflow: hidden;
}
.post-slide .post-img:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0,0,0.0);
    transition: all 0.40s linear 0s;
}
.post-slide:hover .post-img:before{
    background: rgba(0, 0,0,0.6);
}
.post-slide .post-img img{
    width: 100%;
    height: auto;
}
.post-slide .post-info{
    width: 75%;
    position: absolute;
    bottom: -100%;
    left: 12.5%;
    background: #1dcfd1;
    text-align: center;
    line-height: 26px;
    padding: 15px;
    transition: bottom 0.40s ease-in-out 0s;
}
.post-slide:hover .post-info{
    bottom:0;
}
.post-slide .category{
    padding: 0;
    margin: 0;
    list-style: none;
}
.post-slide .category li,
.post-slide .post-date{
    display: inline-block;
    font-size: 16px;
    color: #fff;
    text-transform: capitalize;
}
.post-slide .category li:after{
    content: " /";
}
.post-slide .category li:last-child:after{
    content: "";
}
.post-slide .category li a{
    color: #fff;
    transition: all 0.40s linear;
}
.post-slide .category li a:hover{
    color: #555;
    text-decoration: none;
}
.post-slide .post-review{
    padding: 35px 20px 25px;
    background: #fff;
    position: relative;
}
.post-slide .icons{
    width: 90px;
    height: 90px;
    border: 4px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: -45px;
    right: 10px;
    overflow: hidden;
}
.post-slide .icons img{
    width: 100%;
    height: auto;
}
.post-slide .post-title{
    margin: 0 0 25px 0;
}
.post-slide .post-title a{
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #1dcfd1;
    display: inline-block;
    text-transform: uppercase;
    transition: all 0.30s linear 0s;
}
.post-slide .post-title a:hover{
    text-decoration: none;
    color: #555;
}
.post-slide .post-description{
    color: #555;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 20px;
}
.post-slide .read{
    font-size: 13px;
    color: #555;
    display: block;
    text-align: right;
    text-transform: uppercase;
}
.post-slide .read:hover{
    text-decoration:none;
    color: #1dcfd1;
}

<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="">
                        <div class="post-info">
                            <ul class="category">
                                <li>in <a href="#">Graphics</a></li>
                                <li>by <a href="#">admin</a></li>
                            </ul>
                            <span class="post-date">May 05, 2016</span>
                        </div>
                    </div>
                    <div class="post-review">
                        <span class="icons">
                            <img src="images/img-5.jpg" alt="">
                        </span>
                        <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                        <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda culpa cumque dicta sint soluta voluptas eius iusto modi reprehenderit sint soluta voluptas.</p>
                        <a href="#" class="read">read more</a>
                    </div>
                </div>
 
                <div class="post-slide">
                    <div class="post-img">
                        <img src="images/img-2.jpg" alt="">
                        <div class="post-info">
                            <ul class="category">
                                <li>in <a href="#">Graphics</a></li>
                                <li>by <a href="#">admin</a></li>
                            </ul>
                            <span class="post-date">May 07, 2016</span>
                        </div>
                    </div>
                    <div class="post-review">
                        <span class="icons">
                            <img src="images/img-6.jpg" alt="">
                        </span>
                        <h3 class="post-title"><a href="#">Latest News Post</a></h3>
                        <p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda culpa cumque dicta sint soluta voluptas eius iusto modi reprehenderit sint soluta voluptas.</p>
                        <a href="#" class="read">read more</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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