news slider style : demo 17

CSS

                        

                        .post-slide{
                            padding-right:20px;
                        }
                        .post-slide img{
                            width: 100%;
                            height: auto;
                        }
                        .post-slide .post-review{
                            padding:0 17px 17px 0;
                        }
                        .post-slide .post-date{
                            float:left;
                            margin-right: 10px;
                            padding: 8px 15px;
                            text-align:center;
                            background:#444;
                            font-size:26px;
                            color:#fff;
                            font-weight:700;
                            transition:background 0.20s linear 0s;
                        }
                        .post-slide:hover .post-date{
                            background:#078071;
                        }
                        .post-slide .post-date small{
                            display:block;
                            margin-bottom:10px;
                            font-size: 13px;
                            text-transform: capitalize;
                        }
                        .post-slide .post-date small:before{
                            content:"";
                            display:block;
                            margin-bottom:5px;
                            border-top:1px solid #fff;
                        }
                        .post-slide .post-title{
                            margin: 0;
                            padding-top: 15px;
                        }
                        .post-slide .post-title a{
                            font-size:15px;
                            color: #444;
                            text-transform: uppercase;
                            margin-bottom: 6px;
                            display: block;
                            line-height:20px;
                            font-weight: bold;
                        }
                        .post-slide:hover .post-title a{
                            color:#078071;
                            text-decoration:none;
                        }
                        .post-comment{
                            margin: 0;
                            list-style:none;
                        }
                        .post-comment li a{
                            color:#a9a9a9;
                            text-transform:capitalize;
                        }
                        .post-comment li a:before{
                            content:"|";
                            margin:0 5px 0 5px;
                            color:#d3d3d3;
                        }
                        .owl-buttons{
                            text-align:center;
                            margin-top:20px;
                        }
                        .owl-buttons .owl-prev,
                        .owl-buttons .owl-next{
                            display:inline-block;
                            border:1px solid #d3d3d3;
                            box-shadow: 0 3px 0 #e5e5e5;
                            border-radius:4px;
                            margin-right:20px;
                            padding:8px 15px;
                            transition:all 0.30s linear 0s;
                        }
                        .owl-buttons .owl-prev:after,
                        .owl-buttons .owl-next:after{
                            content:"\f104";
                            font-family: FontAwesome;
                            color: #d3d3d3;
                            font-size:16px;
                        }
                        .owl-controls .owl-buttons .owl-next:after{
                            content:"\f105";
                        }
                        .owl-buttons .owl-prev:hover,
                        .owl-buttons .owl-next:hover{
                            border: 1px solid #078071;
                            box-shadow: 0 3px 0 #fff;
                        }
                        @media only screen and (max-width: 480px) {
                            .post-slide{
                                padding: 0;
                            }
                        }
                    

JavaScript

(News slider depend on jQuery and Owl carousel.)
                        
                        

                        $(document).ready(function() {
                            $("#news-slider").owlCarousel({
                                items : 3,
                                itemsDesktop:[1199,3],
                                itemsDesktopSmall:[980,2],
                                itemsMobile : [550,1],
                                navigation:true,
                                navigationText:["",""],
                                autoPlay:false
                            });
                        });
                    
License Terms