Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №16 для библиотеки 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"> <div class="post-img"> <span class="over-layer"></span> <img src="images/img-1.jpg" alt=""> </div> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet, consectetur.</a> </h3> <span class="post-date">july 11, 2015</span> </div> <div class="post-slide"> <div class="post-img"> <span class="over-layer"></span> <img src="images/img-2.jpg" alt=""> </div> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet, consectetur.</a> </h3> <span class="post-date">july 15, 2015</span> </div> <div class="post-slide"> <div class="post-img"> <span class="over-layer"></span> <img src="images/img-3.jpg" alt=""> </div> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet, consectetur.</a> </h3> <span class="post-date">july 17, 2015</span> </div> </div> </div> </div> </div>
.post-slide{ background: #fff; padding-bottom: 20px; margin: 0 15px; } .post-slide .post-img{ position:relative; } .post-slide .over-layer{ background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; opacity:0; cursor: pointer; transition: all 0.30s ease 0s; } .post-slide:hover .over-layer{ opacity:1; } .post-slide .over-layer:after{ content: "+"; font-size: 52px; color: #fff; position: absolute; top: 31%; left:42%; } .post-slide .post-img img{ width: 100%; height: auto; } .post-slide .post-title{ margin:25px 0 15px 0; } .post-slide .post-title:before{ content:""; border:2px solid #e67e22; width:18%; display: block; margin-bottom:15px; } .post-slide .post-title a{ font-size: 20px; font-weight:bold; color:#333; display: inline-block; text-transform:capitalize; transition: all 0.3s ease 0s; } .post-slide .post-title a:hover{ text-decoration: none; color:#e67e22; } .post-slide .post-date{ text-transform:capitalize; } .post-slide .post-date:before{ content: "\f073"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 7px; color:#e67e22; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background: #e67e22; }
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 4, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [600,1], pagination:true, autoPlay:true }); });