Подробное описание и демонстрация работы блока «Новостной слайдер» для сайта под номером №6 для библиотеки Bootstrap. Html и CSS код для новостного слайдера на сайте как на изображении.
Mauris sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget est vitae massa condimentum porttitor vel non nulla. Donec condimentum neque massa, non sagittis lorem fringilla et. Donec mi sapien.
read more.post-slide{
margin: 0 15px;
text-align:center;
}
.post-img > img{
width: 100%;
height: auto;
}
.post-slide .post-title > a{
color:#444;
font-size: 18px;
font-weight: bold;
display: block;
}
.post-slide .post-title > a:hover{
color:#48a0cf;
}
.post-slide .post-description{
color: #666666;
font-size: 14px;
line-height: 22px;
}
.post-slide .readmore{
background: #48a0cf;
color: #ffffff;
display: inline-block;
padding: 6px;
text-transform: capitalize;
transition:all 0.3s ease-in-out 0s;
}
.post-slide .readmore:hover{
background: #348bba;
}
.owl-theme .owl-controls .owl-buttons div{
width: 25px;
height:25px;
line-height: 23px;
padding: 0;
background: #48a0cf;
border-radius: 0;
opacity: 1;
}
.owl-theme .owl-controls .owl-buttons div:hover{
background: #348bba;
}
.owl-prev:after,
.owl-next:after{
font-family: "Font Awesome 5 Free"; font-weight: 900;
content: "\f104";
width:100%;
height:100%;
display: block;
font-size: 20px;
}
.owl-next:after{
content: "/f105";
}
$(document).ready(function() {
$("#news-slider").owlCarousel({
items : 3,
itemsDesktop:[1199,3],
itemsDesktopSmall:[980,2],
itemsMobile : [600,1],
navigation : true,
pagination : false,
navigationText: ["",""]
});
});