Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №8 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
.post-slide{ padding:0 15px 20px 15px; } .post-img{ background: #7a4b94; } .post-img > img{ width: 100%; height: auto; } .post-slide .post-title{ margin: 10px 0 12px 0; border-bottom: 1px solid #E4E4E4; padding-bottom: 10px; position: relative; } .post-slide .post-title:after{ content: ""; border:1px solid #dc005a; display: inline-block; width: 35px; position: absolute; left: 0; bottom: -1px; } .post-slide .post-title > a{ color:#333333; font-weight: 700; text-transform: capitalize; } .post-slide .post-title > a:hover{ text-decoration: none; } .post-slide .post-description{ color:#555555; font-size: 14px; line-height: 22px; } .post-slide:hover .post-img > img{ opacity: 0.5; transition:0.3s ease; } .post-slide:hover .post-title > a{ color:#7a4b94; transition:0.3s ease; } .owl-buttons{ position: absolute; top: -13%; right: 1.5%; } .owl-theme .owl-controls .owl-buttons div{ border-radius: 0; margin: 0 0 0 3px; padding: 5px 12px; opacity: 1; color: #808080; background: #F1F1F1; border-top: 2px solid transparent; transition: all 0.3s ease 0s; } .owl-theme .owl-controls .owl-buttons div:hover{ color: #7a4b94; border-top: 2px solid #dc005a; } .owl-prev:after, .owl-next:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f104"; font-size: 20px; } .owl-next:after{ content: "\f105"; } @media screen and (max-width:767px){ .owl-buttons { display: none; } } @media screen and (max-width:480px){ .post-slide{ padding-left: 0; padding-right: 0; } }
<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> <h3 class="post-title"><a href="#">Latest News Post</a></h3> <p class="post-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante quam, blandit at ullamcorper dictum, tincidunt nec metus. Integer quis. </p> </div> </div> </div> </div> </div>
$(document).ready(function() { $("#news-slider").owlCarousel({ navigation : true, items : 3, itemsDesktop:[1199,3], itemsDesktopSmall:[980,2], itemsMobile : [550,1], pagination:false, navigationText:false }); });