Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №7 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [480,1], navigation : false, pagination: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=""> </div> <ul class="post-bar"> <li class="user"><i class="fa fa-users"></i> <a href="#">admin</a></li> <li class="date"><i class="fa fa-clock-o"></i> june 5, 2015</li> <li class="comments"><i class="fa fa-envelope"></i> <a href="#">2 comments</a></li> </ul> <h5 class="post-title"><a href="#">Donec lacinia</a></h5> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet dictum porttitor. Donec sed massa vel nibh fermentum luctus in sed felis. Aliquam suscipit mauris et laoreet fringilla. Praesent ut. </p> </div> </div> </div> </div> </div>
.post-slide{ padding: 0 15px; } .post-img{ filter: grayscale(0); } .post-img > img{ border-left:1px solid #ea5f51; border-bottom:1px solid #ea5f51; width: 100%; height: auto; transition:all 0.3s ease-in-out 0s; } .post-img:hover > img{ opacity: 0.7; filter: grayscale(1); } .post-bar{ padding: 20px 0; list-style: none; } .post-bar > li{ display: inline-block; margin-right: 15px; } .post-bar > li > a{ text-transform: uppercase; font-size: 12px; } .post-bar .user > a, .comments > a{ color: #ea5f51; transition:0.2s ease; } .post-bar .user > a:hover, .comments > a:hover{ text-decoration: none; color:#7a4b94; } .post-bar .user > i, .date > i, .comments > i{ color:#7a4b94; margin-right: 8px; } .date{ color: #ea5f51; text-transform: uppercase; font-size: 12px; } .post-slide > .post-title{ padding-bottom: 20px; } .post-slide > .post-title > a{ color: #222222; font-size: 18px; text-transform: uppercase; } .post-slide > .post-description{ color: #999999; font-size: 16px; line-height: 26px; } @media screen and (max-width: 990px){ .post-bar > li{ margin-right: 10px; } } @media screen and (max-width: 768px){ .post-bar > li{ margin-right: 5px; } .post-bar .user > i, .date > i, .comments > i{ margin-right: 5px; } }