Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №20 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
#news-slider{ margin-top: 30px; } .post-slide{ background: #fff; margin: 0 15px; } .post-slide .post-img{ position:relative; overflow: hidden; } .post-slide .post-img img{ width: 100%; height: auto; transform: scale(1,1); transition:transform 0.50s linear; } .post-slide:hover .post-img img{ transform: scale(1.1,1.1); } .post-slide .over-layer{ width:100%; height:100%; position: absolute; top:0; left:0; opacity:0; background:rgba(0, 0, 0,0.4); transition:all 0.50s linear; } .post-slide:hover .over-layer{ opacity:1; text-decoration:none; } .post-slide .over-layer i{ position: relative; top:45%; text-align:center; display: block; color:#fff; font-size:25px; } .post-slide .post-content{ background:#fff; padding: 8px 30px 40px; } .post-slide .post-title{ margin:8px 0 15px 0; } .post-slide .post-title a{ font-size:15px; font-weight:bold; color:#333; display: inline-block; text-transform:uppercase; transition: all 0.3s ease 0s; } .post-slide .post-title a:hover{ text-decoration: none; color:#3498db; } .post-slide .post-description{ line-height:24px; color:#808080; margin-bottom:40px; } .post-slide .post-date{ color:#a9a9a9; } .post-slide .post-date i{ font-size:20px; margin-right:8px; color: #CFDACE; } .post-slide .read-more{ padding:5px 10px; float: right; font-size:12px; background:#e9e9e9; color:#808080; text-transform: uppercase; } .post-slide .read-more:hover{ background: #3498db; text-decoration:none; color:#fff; } .owl-controls .owl-buttons{ text-align:center; margin-top:20px; } .owl-controls .owl-buttons .owl-prev{ background: #fff; position: absolute; top:-13%; left:15px; padding: 0 18px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); transition: background 0.5s ease 0s; } .owl-controls .owl-buttons .owl-next{ background: #fff; position: absolute; top:-13%; right: 15px; padding: 0 18px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); transition: background 0.5s ease 0s; } .owl-controls .owl-buttons .owl-prev:after, .owl-controls .owl-buttons .owl-next:after{ content:"\f104"; font-family: FontAwesome; color: #333; font-size:30px; } .owl-controls .owl-buttons .owl-next:after{ content:"\f105"; } @media only screen and (max-width:1280px) { .post-slide .post-content{ padding:10px; } }
<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=""> <a href="#" class="over-layer"><i class="fa fa-link"></i></a> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet.</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> <span class="post-date"><i class="fa fa-clock-o"></i>Feb 7, 2016</span> <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=""> <a href="#" class="over-layer"><i class="fa fa-link"></i></a> </div> <div class="post-content"> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet.</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> <span class="post-date"><i class="fa fa-clock-o"></i>Feb 9, 2016</span> <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], navigation:true, navigationText:["",""], pagination:true, autoPlay:true }); });