Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №24 для библиотеки 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=""> <div class="over-layer"> <ul class="post-link"> <li><a href="#" class="fa fa-search"></a></li> <li><a href="#" class="fa fa-link"></a></li> </ul> </div> <div class="post-date"> <span class="date">3</span> <span class="month">Mar</span> </div> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Latest News Post</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora...... </p> <a href="#" class="read-more">read more</a> </div> </div> <div class="post-slide"> <div class="post-img"> <img src="images/img-2.jpg" alt=""> <div class="over-layer"> <ul class="post-link"> <li><a href="#" class="fa fa-search"></a></li> <li><a href="#" class="fa fa-link"></a></li> </ul> </div> <div class="post-date"> <span class="date">5</span> <span class="month">Mar</span> </div> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Latest News Post</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam consectetur cumque dolorum, ex incidunt ipsa laudantium necessitatibus neque quae tempora...... </p> <a href="#" class="read-more">read more</a> </div> </div> </div> </div> </div> </div>
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [600,1], autoPlay:true }); });
.post-slide{ margin: 0 15px; position:relative; background:#fff; } .post-slide .post-img{ position: relative; overflow: hidden; } .post-slide .post-img img{ width: 100%; height: auto; } .post-slide .over-layer{ position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; background: rgba(0,0,0,0.6); transition: all 0.30s ease; } .post-slide:hover .over-layer{ opacity:1; } .post-slide .post-link{ margin:0; padding:0; position: relative; top:45%; text-align:center; } .post-slide .post-link li{ display: inline-block; list-style: none; margin-right:20px; } .post-slide .post-link li a{ color:#fff; font-size:20px; } .post-slide .post-link li a:hover{ color: #ff8b3d; text-decoration:none; } .post-slide .post-date{ position:absolute; top:10%; left:4%; } .post-slide .date{ display: inline-block; border-radius: 3px 0 0 3px; padding: 5px 10px; color: #fff; font-size: 20px; font-weight: bold; text-align: center; background:#333; float: left; } .post-slide .month{ display: inline-block; border-radius: 0 3px 3px 0; padding: 5px 13px; color: #111; font-size: 20px; font-weight: bold; background: #ff8b3d; } .post-slide .post-content{ padding:30px; } .post-slide .post-title{ margin:0 0 15px 0; } .post-slide .post-title a{ font-size:18px; font-weight:bold; color:#333; display: inline-block; text-transform:capitalize; transition: all 0.3s ease 0s; } .post-slide .post-title a:hover{ text-decoration: none; color:#ff8b3d; } .post-slide .post-description{ font-size: 14px; line-height:24px; color:#808080; } .post-slide .read-more{ color:#333; font-size:14px; font-weight:bold; text-transform:uppercase; position: relative; transition: color 0.20s linear; } .post-slide .read-more:hover{ text-decoration:none; color:#ff8b3d; } .post-slide .read-more:after{ content:""; position: absolute; width:30%; display: block; border:1px solid #ff8b3d; transition: all 0.30s ease; } .post-slide .read-more:hover:after{ width:100%; } @media only screen and (max-width: 479px) { .post-slide .month{ font-size:14px; } .post-slide .date{ font-size:14px; } }