Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №32 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
<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=""> <span class="post-icon"> <i class="fa fa-book"></i> </span> </div> <ul class="post-bar"> <li>may 2, 2016</li> <li> <a href="#">WebDesign</a> <a href="#">php</a> </li> </ul> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis. </p> <a href="#" class="read-more"> <i class="fa fa-long-arrow-right"></i> <span>read more</span> </a> </div> <div class="post-slide"> <div class="post-img"> <img src="images/img-2.jpg" alt=""> <span class="post-icon"> <i class="fa fa-book"></i> </span> </div> <ul class="post-bar"> <li>may 4, 2016</li> <li> <a href="#">WebDesign</a> <a href="#">php</a> </li> </ul> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec elementum mauris. Praesent vehicula gravida dolor, ac efficitur sem sagittis. </p> <a href="#" class="read-more"> <i class="fa fa-long-arrow-right"></i> <span>read more</span> </a> </div> </div> </div> </div> </div>
.post-slide{ margin: 0 15px; padding: 0 25px 20px 25px; background: #fff; box-shadow:0 2px 3px rgba(0, 0, 0, 0.07); } .post-slide .post-img{ position: relative; margin-bottom: 20px; } .post-slide .post-img img{ width: 100%; height: auto; } .post-slide .post-icon{ width: 60px; height: 60px; display: block; position: absolute; bottom: 25px; left: 25px; text-align: center; background: #333; opacity: 0; border-radius: 3px; transition: all 300ms ease-in-out 0s; } .post-slide:hover .post-icon{ opacity: 1; } .post-slide .post-icon i{ font-size: 20px; color: #fff; line-height: 60px; } .post-slide .post-bar{ margin: 0; padding: 0; list-style: none; text-transform: uppercase; } .post-slide .post-bar li{ display: inline-block; font-size: 15px; color: #676767; margin-right: 5px; } .post-slide .post-bar li:after{ content: "/"; margin-left: 5px; } .post-slide .post-bar li:last-child:after{ content: ""; } .post-slide .post-bar li a{ color: #8e44ad; transition: all 0.3s ease 0s; } .post-slide .post-bar li a:hover{ color: #333; text-decoration: none; } .post-slide .post-bar li a:after{ content: ","; margin: 0 5px; } .post-slide .post-bar li a:last-child:after{ content: ""; } .post-slide .post-title{ margin: 15px 0; text-transform: capitalize; } .post-slide .post-title a{ font-size: 22px; font-weight: 600; color: #3c3c3c; transition: all 300ms linear 0ms; } .post-slide .post-title a:hover{ color: #8e44ad; text-decoration: none; } .post-slide .post-description{ font-size: 16px; color: #676767; line-height: 24px; padding-bottom: 15px; } .post-slide .read-more{ display: inline-block; } .post-slide .read-more:hover{ text-decoration: none; } .post-slide .read-more i{ font-size: 19px; color: #333; margin-right: 5px; transition: all 0.40s linear 0s; } .post-slide .read-more span{ font-size: 16px; color: #333; opacity: 0; text-transform: uppercase; transition: all 0.40s linear 0s; } .post-slide .read-more:after{ content: ""; display: block; width: 40%; position: relative; bottom: -20px; border-bottom: 3px solid #333; opacity: 0; transition: all 0.40s linear 0s; } .post-slide:hover .read-more span, .post-slide:hover .read-more:after{ opacity: 1; } .post-slide .read-more:hover span, .post-slide .read-more:hover i, .post-slide .read-more:hover:after{ color: #8e44ad; border-bottom-color: #8e44ad; }
$(document).ready(function() { $("#news-slider").owlCarousel({ items:3, itemsDesktop:[1199,2], itemsDesktopSmall:[1000,2], itemsMobile:[700,1], pagination:false, navigationText:false, autoPlay:true }); });