Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №10 для библиотеки 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"> <img src="images/img-1.jpg" alt=""> </div> <div class="post-review"> <ul class="post-bar"> <li>June 5, 2015 </li> <li><a href="#">admin</a> </li> </ul> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend a massa rhoncus gravida. Nullam in viverra sapien. Nunc bibendum nec lectus et vulputate. Nam. </p> <a href="#" class="readmore">read more</a> </div> </div> <div class="post-slide"> <div class="post-img"> <img src="images/img-2.jpg" alt=""> </div> <div class="post-review"> <ul class="post-bar"> <li>June 8, 2015 </li> <li><a href="#">admin</a> </li> </ul> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend a massa rhoncus gravida. Nullam in viverra sapien. Nunc bibendum nec lectus et vulputate. Nam. </p> <a href="#" class="readmore">read more</a> </div> </div> </div> </div> </div> </div>
.post-slide{ background: #fff; margin: 0 15px; } .post-slide .post-img > img{ width: 100%; height:auto; } .post-review{ padding: 15px 25px; } .post-bar{ padding: 15px 0; list-style: none; } .post-bar > li{ display: inline-block; color: #c1c1c1; font-size: 12px; line-height: 2; margin-right: 3px; } .post-bar > li:after{ content: "|"; margin-left: 3px; } .post-bar > li:last-child:after{ content: ""; } .post-bar > li > a{ text-transform: capitalize; color:#999; } .post-bar > li > a:hover{ text-decoration: none; color:#e74c3c; } .post-title{ margin-top: 0; } .post-title > a{ color: #333333; font-size: 18px; font-weight: 700; display: block; text-transform: capitalize; } .post-title > a:hover{ text-decoration: none; color:#e74c3c; } .post-description{ color: #828282; font-size: 14px; line-height: 25px; } .readmore{ text-transform: capitalize; display: inline-block; color:#bebebe; margin: 10px 0; } .readmore:after{ content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-left: 10px; display: inline-block; } .readmore:hover{ color:#e74c3c; text-decoration: none; }
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [550,1], pagination:false, navigationText:false }); });html разметка и css стили для реализации блока «Новостной слайдер»