Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №29 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
$(document).ready(function() { $("#news-slider").owlCarousel({ items:3, itemsDesktop:[1199,3], itemsDesktopSmall:[1000,2], itemsMobile : [650,1], navigationText:false, autoPlay:true }); });
.post-slide{ margin: 0 15px; background: #fff; border-bottom: 1px solid #dedde1; } .post-slide .post-header{ padding: 15px 20px; } .post-slide .title{ margin-bottom: 5px; } .post-slide .title a{ font-size: 15px; color: #333; font-weight: bold; text-transform: uppercase; transition: all 0.4s ease 0s; } .post-slide .title a:hover{ color: #fd6058; text-decoration: none; } .post-slide .post-bar{ margin: 15px 0 0 0; padding: 0; list-style: none; } .post-slide .post-bar li{ display: inline-block; margin-right: 20px; color: #808080; } .post-slide .post-bar li a{ font-size: 15px; color: #808080; text-transform: capitalize; } .post-slide .post-bar li a:hover{ text-decoration: none; color: #fd6058; } .post-slide .post-bar li img{ width: 35px; height: 35px; border-radius: 50%; } .post-slide .post-bar li i, .post-slide .post-bar li img{ margin-right: 5px; } .post-slide .pic{ overflow: hidden; position: relative; } .post-slide .pic:after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0); transition: all 0.9s ease 0s; } .post-slide:hover .pic:after{ background: rgba(255,255,255,0.2); } .post-slide .pic img{ width: 100%; height: auto; transform: rotate(0deg) scale(1,1); transition: all 0.6s ease-in-out 0s; } .post-slide:hover .pic img{ transform: rotate(10deg) scale(1.5,1.5); } .post-slide .post-category{ padding: 5px 15px; margin: 0; list-style: none; position: absolute; bottom: 0; left: 0; background: #fd6058; z-index: 1; } .post-slide .post-category li{ display: inline-block; text-transform: uppercase; } .post-slide .post-category li:after{ content: " ,"; color: #fff; } .post-slide .post-category li:last-child:after{ content: ""; } .post-slide .post-category li a{ color: #fff; } .post-slide .post-category li a:hover{ text-decoration: none; color: #333; } .post-slide .post-description{ font-size: 16px; color: #808080; padding: 15px; } @media only screen and (max-width: 480px) { .post-header .post-bar li{ 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-header"> <h4 class="title"> <a href="#">Latest News Post</a> </h4> <ul class="post-bar"> <li><img src="images/img-5.jpg" alt=""><a href="#">Williamson</a></li> <li><i class="fa fa-calendar"></i>02 June 2016</li> </ul> </div> <div class="pic"> <img src="images/img-1.jpg" alt=""> <ul class="post-category"> <li><a href="#">html</a></li> <li><a href="#">css</a></li> </ul> </div> <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> </div> <div class="post-slide"> <div class="post-header"> <h4 class="title"> <a href="#">Latest News Post</a> </h4> <ul class="post-bar"> <li><img src="images/img-6.jpg" alt=""><a href="#">Kristiana</a></li> <li><i class="fa fa-calendar"></i>05 June 2016</li> </ul> </div> <div class="pic"> <img src="images/img-2.jpg" alt=""> <ul class="post-category"> <li><a href="#">html</a></li> <li><a href="#">css</a></li> </ul> </div> <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> </div> </div> </div> </div> </div>