Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №27 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
.post-slide{ padding: 0 15px; } .post-slide .post-img{ overflow: hidden; } .post-slide .post-img img{ width: 100%; height: auto; filter: grayscale(100%); opacity: 0.9; transform: scale(1,1); transition:all 0.3s ease-in-out 0s; } .post-slide:hover .post-img img{ transform: scale(1.2,1.2); filter:none; opacity:1; } .post-slide .post-content{ padding: 20px 30px; position: relative; background: #fff; } .post-slide .post-date{ min-width:28px; min-height:28px; line-height: 28px; text-align: center; background: #556677; position: absolute; top: -30px; left: 30px; } .post-slide .month{ display: block; font-size: 14px; font-weight: bold; color: #fff; padding: 0 10px; background: #14bf9b;; text-transform: uppercase; } .post-slide .date{ color: #fff; font-size: 14px; } .post-slide .post-title{ margin: 20px 0; } .post-slide .post-title a{ color:#14bf9b; font-size:22px; text-transform:capitalize; transition: all 0.50s ease 0s; } .post-slide .post-title a:hover{ color:#333; text-decoration: none; } .post-slide .post-description{ color: #999; font-size: 16px; line-height: 30px; } .post-slide .post-bar{ padding: 15px 0; list-style: none; text-align: center; background: #14bf9b; } .post-slide .post-bar li{ display: inline-block; margin-right: 5px; } .post-slide .post-bar li a{ text-transform: capitalize; font-size: 12px; color: #fff; transition:0.2s ease; } .post-slide .post-bar li a:hover{ text-decoration: none; color:#333; } .post-slide .post-bar li i{ color:#fff; margin-right: 5px; }
<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"> <a href="#"><img src="images/img-1.jpg" alt=""></a> </div> <div class="post-content"> <div class="post-date"> <span class="month">apr</span> <span class="date">10</span> </div> <h5 class="post-title"><a href="#">Latest News Post</a></h5> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsum maxime recusandae repudiandae similique. </p> </div> <ul class="post-bar"> <li> <i class="fa fa-users"></i> <a href="#">admin</a> </li> <li> <i class="fa fa-comments"></i> <a href="#">2</a> </li> <li> <i class="fa fa-thumbs-up"></i> <a href="#">2 Likes</a> </li> </ul> </div> <div class="post-slide"> <div class="post-img"> <a href="#"><img src="images/img-2.jpg" alt=""></a> </div> <div class="post-content"> <div class="post-date"> <span class="month">apr</span> <span class="date">12</span> </div> <h5 class="post-title"><a href="#">Latest News Post</a></h5> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ipsum maxime recusandae repudiandae similique. </p> </div> <ul class="post-bar"> <li> <i class="fa fa-users"></i> <a href="#">admin</a> </li> <li> <i class="fa fa-comments"></i> <a href="#">3</a> </li> <li> <i class="fa fa-thumbs-up"></i> <a href="#">5 Likes</a> </li> </ul> </div> </div> </div> </div> </div>
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 3, itemsDesktop:[1199,2], itemsDesktopSmall:[980,2], itemsMobile: [600, 1], navigation : false, pagination:false, autoPlay : true }); });