news slider style : demo 6

HTML

                    

                        

                            

                                

                                    

                                        

                                            
                                        
                                        

                                            
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
                                        
                                    
                                
                            
                        
                    
                

CSS

                    
                    

                    .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";
                    }

                

JavaScript

News slider depend on jQuery and Owl carousel.

                    
                    

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