Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №22 для библиотеки 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-date"> <span class="date">15</span> <span class="month">feb</span> </div> <div class="post-content"> <img src="images/img-1.jpg" alt=""> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet, consectetur.</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum earum porro quisquam repellendus tempora? Pariatur. </p> <a href="#" class="read-more">read more</a> </div> </div> <div class="post-slide"> <div class="post-date"> <span class="date">17</span> <span class="month">feb</span> </div> <div class="post-content"> <img src="images/img-2.jpg" alt=""> <h3 class="post-title"> <a href="#">Lorem ipsum dolor sit amet, consectetur.</a> </h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum earum porro quisquam repellendus tempora? Pariatur. </p> <a href="#" class="read-more">read more</a> </div> </div> </div> </div> </div> </div>
#news-slider{ margin-top: 30px; } .post-slide{ margin: 0 15px; margin-top: 40px; position: relative; } .post-slide .post-date{ width: 80px; background: #a2397b; float: left; padding: 15px 0; } .post-slide:hover .post-date{ background:#3498db; } .post-slide .date{ font-size:30px; color:#fff; display: block; text-align:center; font-weight: bold; } .post-slide .month{ font-size: 14px; color:#fff; display: block; text-align:center; text-transform:uppercase; } .post-slide .post-content{ padding-left: 98px; } .post-slide .post-content img{ width: 100%; height: auto; } .post-slide .post-title{ margin:25px 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{ color:#3498db; text-decoration: none; } .post-slide .post-description{ font-size: 14px; line-height:24px; color:#808080; margin-bottom:25px; } .post-slide .read-more{ display: inline-block; color:#fff; background: #3498db; padding:15px 13px; font-weight: bold; border-radius:2px; text-transform:uppercase; border-bottom:4px solid #226595; transition: color 0.20s linear; } .post-slide .read-more:hover{ text-decoration:none; background: #226595; } .post-slide .read-more i{ margin-left:10px; font-size:10px; } .owl-controls .owl-buttons{ margin: 10px; position: absolute; top: -9%; width: 100%; text-align: center; } .owl-controls .owl-prev, .owl-controls .owl-next{ display: inline-block; padding: 8px 20px; background:#fff; border: 5px solid #444; margin-right:30px; transition:background 0.50s ease; } .owl-controls .owl-prev:hover, .owl-controls .owl-next:hover{ background:#3498db; border-color: #3498db; } .owl-controls .owl-prev:after, .owl-controls .owl-next:after{ content:"\f104"; font-family: FontAwesome; color: #444; font-size:26px; line-height: 26px; } .owl-controls .owl-next:after{ content:"\f105"; } .owl-controls .owl-prev:hover:after, .owl-controls .owl-next:hover:after{ color:#fff; } @media only screen and (max-width: 480px){ .post-slide .post-date{ width: 70px; } .post-content{ padding-left: 85px; } }
$(document).ready(function() { $("#news-slider").owlCarousel({ items : 2, itemsDesktop:[1199,2], itemsDesktopSmall:[980,2], itemsMobile : [700,1], pagination:false, navigation:true, navigationText:["",""], autoPlay:true }); });