Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №11 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 4, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [550,1], pagination:false, navigationText:false }); });
<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> <a href="#"><i class="fa fa-search"></i></a> </span> </div> <div class="post-review"> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis. </p> <ul class="post-bar"> <li>Jan 2, 2015</li> <li><a href="#">5</a> comments</li> </ul> </div> </div> <div class="post-slide"> <div class="post-img"> <img src="images/img-2.jpg" alt=""> <span> <a href="#"><i class="fa fa-search"></i></a> </span> </div> <div class="post-review"> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis. </p> <ul class="post-bar"> <li>Jan 5, 2015</li> <li><a href="#">3</a> comments</li> </ul> </div> </div> </div> </div> </div> </div>
.post-slide{ margin: 0 15px; } .post-slide .post-img{ position: relative; } .post-slide .post-img > img{ width: 100%; height:auto; } .post-slide .post-img > span{ display: block; position: absolute; top:0; width: 100%; height:100%; text-align: center; background: rgba(68, 160, 222, 0.8); opacity: 0; transition:all 300ms ease-in-out 0s; } .post-slide .post-img > span > a{ position: relative; top:45%; color:#fff; } .post-slide .post-review > .post-title{ margin: 15px 0 14px; font-size: 15px; font-weight: 600; text-transform: uppercase; } .post-slide .post-review > .post-title > a{ color:#3c3c3c; transition:all 300ms linear 0ms; } .post-slide .post-review > .post-title > a:hover{ color: #3498db; text-decoration: none; } .post-slide .post-review > .post-description{ border-bottom: 1px solid #dbdbdb; font-size: 17px; line-height: 24px; padding-bottom: 25px; color:#676767; } .post-slide .post-review > .post-bar{ padding: 0; list-style: none; } .post-slide .post-review > .post-bar > li{ display: inline-block; font-size: 13px; color:#676767; } .post-slide .post-review > .post-bar > li:after{ content: " / "; } .post-slide .post-review > .post-bar > li:last-child:after{ content: ""; } .post-slide .post-review > .post-bar > li > a{ color:#3498db; } .post-slide .post-review > .post-bar > li > a:hover{ text-decoration: none; } .post-slide:hover .post-img > span{ opacity: 1; }