Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №12 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
Latest News Post
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit porta arcu. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum elementum massa, in tempor diam auctor at. Quisque pulvinar, ex eu.
Latest News Post
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit porta arcu. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum elementum massa, in tempor diam auctor at. Quisque pulvinar, ex eu.
.post-slide{
overflow: hidden;
padding: 0 10px;
}
.post-slide > .post-img {
position: relative;
}
.post-slide > .post-img img{
width: 100%;
height: auto;
}
.post-slide > .post-img > .da-thumbs a {
display: block;
position: relative;
}
.post-slide > .post-img > .da-thumbs a div {
position: absolute;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
}
.post-slide > .post-img > .da-thumbs > a > div > i{
font-size: 40px;
position: absolute;
top: 42%;
left: 39%;
color:#3498db;
}
.post-slide > .post-img > .icons{
position: absolute;
left: 17px;
bottom: -19px;
width: 41px;
height: 41px;
border-radius: 50%;
background: #3498db;
z-index: 2;
}
.post-slide > .post-img > .icons > i{
position: absolute;
left:15px;
top:14px;
color: #fff;
}
.post-slide > .post-img > .icons:before{
content: "";
width: 2px;
height: 2px;
background:#fff;
position: absolute;
top: 21px;
left: 21px;
border-radius:30px;
transform:scale(0,0);
transition:all 0.3s ease 0s;
}
.post-slide > .post-img > .icons:hover:before{
transform:scale(1,1);
width:37px;
height:37px;
left:2px;
top:2px;
}
.post-slide > .post-img > .icons:hover i{
color:#3498db;
}
.post-slide >.post-review{
border:1px solid lightgray;
border-top:none;
padding: 35px 20px 25px;
background:#ededed;
position:relative;
}
.post-slide > .post-review > .post-bar,
.post-slide > .post-review > .post-bar > li{
font-size:16px;
font-family: serif,Arial;
list-style:none;
padding:0;
color:#555555;
display:inline-block;
}
.post-slide > .post-review > .post-bar > li > i{
color:#777777;
margin-right:8px;
}
.post-slide > .post-review > .post-bar > li > a{
text-decoration:none;
color:#555555;
}
.post-slide > .post-review > .post-bar > li > a:hover{
color:#3498db;
}
.post-review > .post-bar li:after{
content:"/";
margin-left:7px;
color:#221e20;
}
.post-review > .post-bar li:last-child:after{
content:"";
}
.post-slide > .post-review > .post-title{
margin:0 0 20px 0;
color:#444444;
font-weight:bold;
font-size:25px;
}
.post-slide > .post-review > .post-description{
font-size:14px;
line-height:21px;
color:#444454;
}
.post-slide > .post-review > .post-comment,
.post-slide > .post-review > .post-comment > li{
list-style:none;
padding:0;
display:inline-block;
}
.post-slide > .post-review > .post-comment li,
.post-slide > .post-review > .post-comment li a{
text-decoration:none;
color:#555555;
text-transform:uppercase;
font-size:11px;
font-weight: bold;
transition:color 0.10s linear;
}
.post-slide > .post-review > .post-comment li:after{
content:"|";
margin:0 7px;
color:#3498db;
}
.post-slide > .post-review > .post-comment li:last-child:after{
content: "";
}
.post-slide > .post-review > .post-comment li i{
margin-right: 3px;
}
.post-slide > .post-review > .post-comment li a:hover {
color:#3498db;
}
$(document).ready(function() {
$("#news-slider").owlCarousel({
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [980,2],
pagination :false,
autoPlay : false
});
});
$(function() {
$(' .da-thumbs > a ').each( function() { $(this).hoverdir(); } );
});
<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">
<div class="da-thumbs">
<a href="#">
<img src="images/img-1.jpg" alt="">
<div><i class="fa fa-search"></i></div>
</a>
</div>
<a href="#" class="icons"><i class="fa fa-plus"></i></a>
</div>
<div class="post-review">
<ul class="post-bar">
<li><i class="fa fa-calendar"></i>June 2, 2015</li>
<li><a href="#"><i class="fa fa-user"></i> admin</a></li>
</ul>
<h3 class="post-title">Latest News Post</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit porta arcu. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum elementum massa, in tempor diam auctor at. Quisque pulvinar, ex eu. </p>
<ul class="post-comment">
<li>
<i class="fa fa-folder-o"></i>
<a href="#">Graphics</a>,
<a href="#">Web Projects</a>
</li>
<li>
<i class="fa fa-comments"></i>
<a href="#"> 5 </a>
</li>
</ul>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<div class="da-thumbs">
<a href="#">
<img src="images/img-2.jpg" alt="">
<div><i class="fa fa-search"></i></div>
</a>
</div>
<a href="#" class="icons"><i class="fa fa-plus"></i></a>
</div>
<div class="post-review">
<ul class="post-bar">
<li><i class="fa fa-calendar"></i>June 5, 2015</li>
<li><a href="#"><i class="fa fa-user"></i> admin</a></li>
</ul>
<h3 class="post-title">Latest News Post</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit porta arcu. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum elementum massa, in tempor diam auctor at. Quisque pulvinar, ex eu. </p>
<ul class="post-comment">
<li>
<i class="fa fa-folder-o"></i>
<a href="#">Graphics</a>,
<a href="#">Web Projects</a>
</li>
<li>
<i class="fa fa-comments"></i>
<a href="#"> 7 </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>