Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №9 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [600,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"> <img src="images/img-1.jpg" alt=""> <h3 class="post-title"> <a href="#">Latest News Post</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nulla eu massa efficitur, eu hendrerit ipsum efficitur. Morbi vitae velit ac. </p> <ul class="post-bar"> <li><a href="#"><i class="fa fa-users"></i>Admin</a></li> <li><i class="fa fa-clock-o"></i>March 5,2015</li> <li><a href="#"><i class="fa fa-comments"></i>2 Comment</a></li> </ul> </div> <div class="post-slide"> <img src="images/img-2.jpg" alt=""> <h3 class="post-title"> <a href="#">Latest News Post</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nulla eu massa efficitur, eu hendrerit ipsum efficitur. Morbi vitae velit ac. </p> <ul class="post-bar"> <li><a href="#"><i class="fa fa-users"></i>Admin</a></li> <li><i class="fa fa-clock-o"></i>March 7,2015</li> <li><a href="#"><i class="fa fa-comments"></i>5 Comment</a></li> </ul> </div> <div class="post-slide"> <img src="images/img-3.jpg" alt=""> <h3 class="post-title"> <a href="#">Latest News Post</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida nulla eu massa efficitur, eu hendrerit ipsum efficitur. Morbi vitae velit ac. </p> <ul class="post-bar"> <li><a href="#"><i class="fa fa-users"></i>Admin</a></li> <li><i class="fa fa-clock-o"></i>March 10,2015</li> <li><a href="#"><i class="fa fa-comments"></i>3 Comment</a></li> </ul> </div> </div> </div> </div> </div>
.post-slide{ background: #fff; padding-bottom: 20px; margin: 0 15px; } .post-slide > img{ width: 100%; height: auto; } .post-slide .post-title{ text-transform: uppercase; padding: 0 20px; } .post-slide .post-title > a{ font-size: 20px; color: #222; display: inline-block; transition: all 0.3s ease 0s; } .post-slide .post-title > a:hover{ text-decoration: none; color:#e74c3c; } .post-slide .post-description{ font-size: 14px; padding: 0 20px; margin: 15px 0 25px 0; } .post-bar{ list-style: none; padding:10px 20px; border-top:1px solid #e8e7e7; } .post-bar > li{ display: inline-block; margin: 5px; color:#aaaaaa; } .post-bar > li > a{ color:#aaaaaa; transition:0.3s ease; } .post-bar > li > a:hover{ text-decoration: none; color:#e74c3c; } .post-bar > li i{ margin-right: 7px; }