"News Slider"
Bootstrap 4.1.1 Snippet by mastersujit7

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<div class="container">
<h3 class="h3">News Slider Demo - 1 </h3>
<div class="row">
<div class="col-md-12">
<div id="news-slider" class="owl-carousel">
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="http://bestjquery.com/tutorial/news-slider/demo19/images/img-1.jpg" alt="">
<div class="post-date">
<span class="date">10</span>
<span class="month">jan</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest News Post</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">admin</a></li>
<li><i class="fa fa-comment"></i><a href="#">5</a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, nesciunt obcaecati possimus quasi quibusdam quos ratione sequi sit veritatis.</p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{background-color:#f1f1f2 !important;}
h3.h3{text-align:center;padding:1.5em 0em;text-transform:capitalize;font-size:1.5em;}
/****************** News Slider Demo-1 *******************/
.post-slide{overflow:hidden;margin-right:15px;background-color:#fff!important}
.post-slide .post-img{float:left;width:50%;position:relative;margin-right:30px}
.post-slide .post-img img{width:100%;height:auto}
.post-slide .post-date{background:#ec3c6a;color:#fff;position:absolute;top:0;right:0;display:block;padding:2% 3%;width:60px;height:60px;text-align:center;transition:all .5s ease}
.post-slide .date{display:block;font-size:20px;font-weight:700}
.post-slide .month{display:block;font-size:11px;text-transform:uppercase}
.post-slide .post-review{padding:5% 3% 1% 0;border-top:3px solid #38cfd8}
.post-slide:hover .post-review{border-top-color:#ec3c6a}
.post-slide .post-title{margin:0 0 10px 0}
.post-slide .post-title a{font-size:14px;color:#333;text-transform:uppercase}
.post-slide .post-title a:hover{text-decoration:none;font-weight:700}
.post-slide .post-bar{padding:0;list-style:none;text-transform:uppercase;position:relative;margin-bottom:20px}
.post-slide .post-bar:after,.post-slide .post-bar:before{border:1px solid #38cfd8;bottom:-10px;content:"";display:block;position:absolute;right:36%;width:25px}
.post-slide .post-bar:before{border:1px solid #ec3c6a;right:32%}
.post-slide .post-bar li{color:#555;font-size:10px;margin-right:10px;display:inline-block}
.post-slide .post-bar li a{font-size:13px;text-decoration:none;text-transform:uppercase;color:#ec3c6a}
.post-slide .post-bar li a:hover{color:#ec3c6a}
.post-slide .post-bar li i{color:#777;margin-right:5px}
.post-slide .post-description{font-size:12px;line-height:21px;color:#444454}
.owl-theme .owl-controls{margin-top:30px}
.owl-theme .owl-controls .owl-page span{background:#fff;border:2px solid #37a6a4}
.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{background:#37a6a4}
@media only screen and (max-width:990px){.post-slide .post-img{width:100%}
.post-slide .post-review{width:100%;border-bottom:4px solid #ec3c6a}
.post-slide .post-bar:before{left:0}
.post-slide .post-bar:after{left:25px}
}
/****************** News Slider Demo-2 *******************/
.demo{background:linear-gradient(to right,#fcc,#d3d3d3)}
.post-slide2{margin:0 15px;box-shadow:0 1px 2px rgba(43,59,93,.3);margin-bottom:2em}
.post-slide2 .post-img{overflow:hidden}
.post-slide2 .post-img img{width:100%;height:auto;transform:scale(1);transition:all 1s ease-in-out 0s}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
$("#news-slider").owlCarousel({
items : 2,
itemsDesktop : [1199,2],
itemsMobile : [600,1],
pagination :true,
autoPlay : true
});
$("#news-slider2").owlCarousel({
items:3,
itemsDesktop:[1199,2],
itemsDesktopSmall:[980,2],
itemsMobile:[600,1],
pagination:false,
navigationText:false,
autoPlay:true
});
$("#news-slider3").owlCarousel({
items:3,
itemsDesktop:[1199,2],
itemsDesktopSmall:[1000,2],
itemsMobile:[700,1],
pagination:false,
navigationText:false,
autoPlay:true
});
$("#news-slider4").owlCarousel({
items:3,
itemsDesktop:[1199,3],
itemsDesktopSmall:[1000,2],
itemsMobile:[600,1],
pagination:false,
navigationText:false,
autoPlay:true
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Light Bootstrap Dashboard PRO
Carousel Featured News Boostrap 4
Client or Partners Logo Slider
Timely Login slider

Questions / Comments: