news slider style : demo 7

HTML

                    

                        

                            

                                

                                    

                                        

                                            
                                        
                                        

                                            
 admin
                                            
 june 5, 2015
                                            
 2 comments
                                        
                                        
Donec lacinia
                                        

                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet dictum porttitor. Donec sed massa vel nibh fermentum luctus in sed felis. Aliquam suscipit mauris et laoreet fringilla. Praesent ut.
                                        
                                    
                                
                            
                        
                    
                

CSS

                    
                    

                    .post-slide{
                        padding: 0 15px;
                    }
                    .post-img{
                        filter: grayscale(0);
                    }
                    .post-img > img{
                        border-left:1px solid #ea5f51;
                        border-bottom:1px solid #ea5f51;
                        width: 100%;
                        height: auto;
                        transition:all 0.3s ease-in-out 0s;
                    }
                    .post-img:hover > img{
                        opacity: 0.7;
                        filter: grayscale(1);
                    }
                    .post-bar{
                        padding: 20px 0;
                        list-style: none;
                    }
                    .post-bar > li{
                        display: inline-block;
                        margin-right: 15px;
                    }
                    .post-bar > li > a{
                        text-transform: uppercase;
                        font-size: 12px;
                    }
                    .post-bar .user > a,
                    .comments > a{
                        color: #ea5f51;
                        transition:0.2s ease;
                    }
                    .post-bar .user > a:hover,
                    .comments > a:hover{
                        text-decoration: none;
                        color:#7a4b94;
                    }
                    .post-bar .user > i,
                    .date > i,
                    .comments > i{
                        color:#7a4b94;
                        margin-right: 8px;
                    }
                    .date{
                        color: #ea5f51;
                        text-transform: uppercase;
                        font-size: 12px;
                    }
                    .post-slide > .post-title{
                        padding-bottom: 20px;
                    }
                    .post-slide > .post-title > a{
                        color: #222222;
                        font-size: 18px;
                        text-transform: uppercase;
                    }
                    .post-slide > .post-description{
                        color: #999999;
                        font-size: 16px;
                        line-height: 26px;
                    }
                    @media screen and (max-width: 990px){
                        .post-bar > li{
                            margin-right: 10px;
                        }
                    }
                    @media screen and (max-width: 768px){
                        .post-bar > li{
                            margin-right: 5px;
                        }
                        .post-bar .user > i,
                        .date > i,
                        .comments > i{
                            margin-right: 5px;
                        }
                    }
                

JavaScript

News slider depend on jQuery and Owl carousel.

                    
                    

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