Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №13 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="news-slider" class="owl-carousel">
<div class="post-slide">
<h3 class="post-category"><a href="#">html</a></h3>
<div class="post-review">
<div class="post-bar">
<span class="month">nov</span>
<span class="date">5</span>
</div>
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
</div>
<div class="post-img">
<img src="images/img-1.jpg" alt="">
</div>
<p class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam.
</p>
</div>
<div class="post-slide">
<h3 class="post-category"><a href="#">css</a></h3>
<div class="post-review">
<div class="post-bar">
<span class="month">nov</span>
<span class="date">7</span>
</div>
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
</div>
<div class="post-img">
<img src="images/img-2.jpg" alt="">
</div>
<p class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam.
</p>
</div>
<div class="post-slide">
<h3 class="post-category"><a href="#">php</a></h3>
<div class="post-review">
<div class="post-bar">
<span class="month">nov</span>
<span class="date">10</span>
</div>
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
</div>
<div class="post-img">
<img src="images/img-3.jpg" alt="">
</div>
<p class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam.
</p>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$("#news-slider").owlCarousel({
items : 4,
itemsDesktop:[1199,3],
itemsDesktopSmall:[980,2],
itemsMobile : [550,1],
pagination:false,
autoPlay:true
});
});
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="news-slider" class="owl-carousel">
<div class="post-slide">
<h3 class="post-category"><a href="#">html</a></h3>
<div class="post-review">
<div class="post-bar">
<span class="month">nov</span>
<span class="date">5</span>
</div>
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
</div>
<div class="post-img">
<img src="images/img-1.jpg" alt="">
</div>
<p class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam.
</p>
</div>
<div class="post-slide">
<h3 class="post-category"><a href="#">css</a></h3>
<div class="post-review">
<div class="post-bar">
<span class="month">nov</span>
<span class="date">7</span>
</div>
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
</div>
<div class="post-img">
<img src="images/img-2.jpg" alt="">
</div>
<p class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam.
</p>
</div>
<div class="post-slide">
<h3 class="post-category"><a href="#">php</a></h3>
<div class="post-review">
<div class="post-bar">
<span class="month">nov</span>
<span class="date">10</span>
</div>
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
</div>
<div class="post-img">
<img src="images/img-3.jpg" alt="">
</div>
<p class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam.
</p>
</div>
</div>
</div>
</div>
</div>
.post-slide{
border-width: 1px 1px 5px;
border-style: solid;
border-color: #e67e22 #f0f0f0 #f0f0f0;
border-radius: 5px;
margin: 0 10px;
}
.post-slide .post-category{
border-bottom:1px solid whitesmoke;
margin:0;
text-align:center;
padding:10px;
font-size:15px;
letter-spacing:2px;
text-transform:capitalize;
}
.post-slide .post-category > a{
text-transform: uppercase;
color:#e67e22;
transition: all 0.2s ease 0s;
}
.post-slide .post-category > a:hover{
color: #373a3f;
}
.post-slide .post-review{
overflow: hidden;
padding:10px;
}
.post-slide .post-bar{
width: 60px;
height: 60px;
border-radius: 50%;
background: #e67e22;
float: left;
line-height: 34px;
text-align: center;
margin-right: 10px;
}
.post-slide .post-bar > .month{
display: block;
color:#fff;
font-size:10px;
text-transform: capitalize;
}
.post-slide .post-bar > .date{
color: #fff;
display: block;
font-size: 28px;
font-weight: bold;
line-height: 12px;
}
.post-slide .post-title{
line-height: 20px;
margin: 10px 0 0 0;
}
.post-slide .post-title > a{
font-size:17px;
text-transform:uppercase;
font-weight:bold;
line-height:10px;
color:#333;
transition: all 0.2s ease 0s;
}
.post-slide .post-title > a:hover{
color:#e67e22;
}
.post-slide .post-img{
filter: grayscale(0);
transition:all 0.3s ease 0s;
}
.post-slide .post-img > img{
width: 100%;
height: auto;
}
.post-slide:hover .post-img{
filter: grayscale(1);
}
.post-slide .post-description{
color: #555;
font-size: 14px;
line-height: 22px;
padding: 20px 35px;
}