Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №5 для библиотеки Bootstrap. Html и CSS код для создания новостного слайдера на сайте как на изображении.
.post-slide{ border: 1px solid #e7e8ec; border-radius: 5px 5px 0 0; margin: 0 15px; overflow: hidden; } .post-slide .post-img{ position: relative; margin-bottom: 10px; } .post-slide .post-img > a{ position: relative; display: block; } .post-slide .post-img > a > img{ width: 100%; height:auto; } .post-slide .post-img > a:hover:before{ content: ""; position: absolute; top:0; left:0; border: 1px solid #dc005a; width: 100%; height:100%; background:#dc005a; opacity: 0.5; } .post-slide .author-img{ position: absolute; bottom:-12%; right:8%; padding: 4px; background: #fff; border-radius: 50%; display: inline-block; } .post-slide .author-img > img{ width: 60px; height:60px; border-radius: 50%; } .post-slide .post-content{ padding: 20px 30px; } .post-slide .post-bar{ padding: 0; list-style: none; } .post-slide .post-bar > li{ display: inline-block; margin-right: 20px; } .post-slide .post-bar > li:last-child{ margin-right: 0; } .post-slide .author > a{ color:#7e848e; font-size: 14px; } .post-slide .post-date{ color:#c8c9cc; } .post-slide .author i, .post-slide .post-date > i{ margin-right: 10px; color:#c8c9cc; } .post-slide .author > a:hover{ text-decoration: none; } .post-slide .post-title{ margin-top: 15px; } .post-title > a{ color:#2a2d32; font-size: 14px; font-weight: 700; } .post-title > a:hover{ text-decoration: none; } .post-description{ font-size: 13.5px; color: #7e848e; font-weight: 400; margin-bottom: 0; line-height: 30px; }
$(document).ready(function() { $("#news-slider").owlCarousel({ navigation : false, pagination : false, items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [600,1] }); });
<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-5.jpg" alt=""></a> <span class="author-img"><img src="images/img-1.jpg" alt=""></span> </div> <div class="post-content"> <ul class="post-bar"> <li class="author"><i class="fa fa-user"></i><a href="#">Aliquam rutrum</a></li> <li class="post-date"><i class="fa fa-calendar"></i>5 Nov 15</li> </ul> <h5 class="post-title"><a href="#">Nulla quis est sed</a></h5> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis justo. </p> </div> </div> </div> </div> </div> </div>