news slider style : demo 1

HTML

                    

                        

                            

                                

                                    

                                        

                                            
                                            
                                                12
                                                Sep, 2015
                                            
                                        
                                        

                                            Aliquam rutrum
                                        
                                        

                                            
                                                Author :
                                                admin
                                            
                                            
                                                Comments :
                                                2
                                            
                                            
                                                3
                                            
                                        
                                        

                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque mi, commodo in pharetra pretium, porta eget arcu. Vivamus.
                                        
                                        read more
                                    
                                
                            
                        
                    
                

CSS

                    

                    .post-slide{
                        padding: 0 15px;
                    }
                    .post-slide .post-img{
                        position: relative;
                    }
                    .post-slide .post-img > img{
                        width: 100%;
                        height:auto;
                    }
                    .post-slide .post-date{
                        position: absolute;
                        bottom: 20px;
                        left:20px;
                        padding: 6px 8px;
                        background-color: rgba(5, 5, 5, 0.7);
                        font-size: 12px;
                        color: #afb0b4;
                    }
                    .post-slide .post-date > .date{
                        display: block;
                        text-align: center;
                        font-size: 30px;
                        font-weight: 700;
                        line-height: 40px;
                    }
                    .post-slide .post-title > a{
                        display: block;
                        color:#e67d22;
                        text-transform: capitalize;
                        font-size: 20px;
                        font-weight: bold;
                        margin-bottom: 20px;
                    }
                    .post-slide .post-title > a:hover{
                        text-decoration: none;
                    }
                    .post-slide .post-bar{
                        margin-bottom: 12px;
                    }
                    .post-slide .user,
                    .post-slide .comment{
                        color:#4d5359;
                        display: inline-block;
                        padding-right: 10px;
                        margin-right: 12px;
                    }
                    .post-slide .user > i,
                    .post-slide .comment > i{
                        margin-right: 5px;
                    }
                    .post-slide .user > a,
                    .post-slide .comment > a{
                        color:#e67d22;
                    }
                    .post-slide .user > a:hover,
                    .post-slide .comment > a:hover,
                    .post-slide .like > a:hover{
                        text-decoration: none;
                    }
                    .post-slide .like{
                        padding-right: 10px;
                        margin-right: 12px;
                    }
                    .post-slide .like > a{
                        color:#e67d22;
                        display: inline-block;
                    }
                    .post-slide .like > a > i{
                        margin-right: 5px;
                    }
                    .post-slide .post-description{
                        color:#5c5e64;
                        font-size: 13px;
                        line-height: 1.618;
                        margin-bottom: 10px;
                    }
                    .post-slide .readmore{
                        display: inline-block;
                        background: #50565d;
                        font-size: 12px;
                        color:#fff;
                        padding: 10px 13px;
                        border-radius: 3px;
                        text-transform: capitalize;
                    }
                    .post-slide .readmore:hover{
                        color:#fff;
                        text-decoration: none;
                    }
                

JavaScript

News slider depend on jQuery and Owl carousel.

                    
                    

                    $(document).ready(function() {
                        $("#news-slider").owlCarousel({
                            navigation : false,
                            pagination : false,
                            items : 3,
                            itemsDesktop:[1199,3],
                            itemsDesktopSmall:[980,2],
                            itemsMobile : [479,1]
                        });
                    });