Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №30 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
.post-slide{ margin: 0 15px; border-bottom: 1px solid #dadada; box-shadow: 0 0 5px rgba(167, 197, 167, 0.8); transition: all 0.4s ease-in-out 0s; } .post-slide .post-img{ position: relative; overflow: hidden; } .post-slide .post-img:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0); transition: all 0.4s linear 0s; } .post-slide:hover .post-img:before{ background: rgba(0, 0, 0, 0.6); } .post-slide .post-img img{ width: 100%; height: auto; } .post-slide .category { width: 20%; font-size: 16px; color: #fff; line-height: 11px; text-align: center; text-transform: capitalize; padding: 11px 0; background: #ff9412; position: absolute; bottom: 0; left: -50%; transition: all 0.5s ease-in-out 0s; } .post-slide:hover .category{ left: 0; } .post-slide .post-review{ padding: 25px 20px; background: #fff; position: relative; } .post-slide .post-title{ margin: 0; } .post-slide .post-title a{ display: inline-block; font-size: 16px; color: #ff9412; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 25px; transition: all 0.30s linear 0s; } .post-slide .post-title a:hover{ text-decoration: none; color: #555; } .post-slide .post-description{ font-size: 15px; color: #555; line-height: 26px; } .post-review .post-bar{ margin-top: 20px; } .post-bar span{ display: inline-block; font-size: 14px; } .post-bar span i{ margin-right: 5px; color: #999; } .post-bar span a{ color: #999; text-transform: uppercase; } .post-bar span a:hover{ text-decoration: none; color: #ff9412; } .post-bar span.comments{ float: right; } @media only screen and (max-width: 359px) { .post-slide .category{ font-size: 13px; } }
$(document).ready(function() { $("#news-slider").owlCarousel({ items:3, itemsDesktop:[1199,3], itemsDesktopSmall:[1000,2], itemsMobile:[650,1], pagination:false, navigationText:false, autoPlay:true }); });
<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 class="category">HTML</div> </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 adipisicing elit. Ad assumenda culpa cumque dicta sint soluta voluptas eius iusto modi reprehenderit sint soluta voluptas. </p> <div class="post-bar"> <span><i class="fa fa-user"></i> <a href="#">Williamson</a></span> <span class="comments"><i class="fa fa-comments"></i> <a href="#">2 Comments</a></span> </div> </div> </div> <div class="post-slide"> <div class="post-img"> <img src="images/img-2.jpg" alt=""> <div class="category">CSS</div> </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 adipisicing elit. Ad assumenda culpa cumque dicta sint soluta voluptas eius iusto modi reprehenderit sint soluta voluptas. </p> <div class="post-bar"> <span><i class="fa fa-user"></i> <a href="#">Kristiana</a></span> <span class="comments"><i class="fa fa-comments"></i> <a href="#">4 Comments</a></span> </div> </div> </div> </div> </div> </div> </div>