基于owl-carousel的响应式文章卡片设计效果

这是一款基于owl-carousel的响应式文章卡片设计效果。该效果以卡片的方式展示最新文章，带文章缩略图和描述信息等，鼠标滑过缩略图时带放大效果。并且整个文章卡片以旋转木马的方式来回滚动。

owl-carousel是一款强大的响应式jQuery旋转木马插件。它支持触摸设备，支持IE9+的所有现代浏览器。

使用方法

在页面中引入owl.carousel.min.css和owl.carousel.min.js文件。

<link rel="stylesheet" href="css/owl.carousel.min.css"/>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>                  
                

HTML结构

一张文章卡片的完整HTML结构如下：

<div class="post-slide">
    <div class="post-img">
        <a href="#"><img src="img/1.jpg" alt=""></a>
    </div>
    <div class="post-content">
        <h3 class="post-title"><a href="#">最新文章</a></h3>
        <p class="post-description">
            ......
        </p>
        <ul class="post-bar">
            <li><i class="fa fa-calendar"></i> 2016-7-28</li>
            <li>
                <i class="fa fa-folder"></i>
                <a href="#">标签1</a>
                <a href="#">标签2</a>
                <a href="#">标签3</a>
            </li>
        </ul>
        <a href="#" class="read-more">点击查看</a>
    </div>
</div>               
                

CSS样式

为卡片添加下面的CSS样式。

.post-slide{
    margin: 0 15px;
}
.post-slide .post-img{
    overflow: hidden;
}
.post-slide .post-img img{
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: all 1s ease-in-out 0s;
}
.post-slide:hover .post-img img{
    transform: scale(1.08);
}
.post-slide .post-content{
    background: #fff;
    padding: 20px;
}
.post-slide .post-title{
    font-size: 17px;
    font-weight: 600;
    margin-top: 0;
    text-transform: capitalize;
}
.post-slide .post-title a{
    display: inline-block;
    color: #808080;
    transition: all 0.3s ease 0s;
}
.post-slide .post-title a:hover{
    color: #3d3030;
    text-decoration: none;
}
.post-slide .post-description{
    font-size: 15px;
    color: #676767;
    line-height: 24px;
    margin-bottom: 14px;
}
.post-slide .post-bar{
    padding: 0;
    margin-bottom: 15px;
    list-style: none;
}
.post-slide .post-bar li{
    color: #676767;
    padding: 2px 0;
}
.post-slide .post-bar li i{
    margin-right: 5px;
}
.post-slide .post-bar li a{
    display: inline-block;
    font-size: 12px;
    color: #808080;
    transition: all 0.3s ease 0s;
}
.post-slide .post-bar li a:after{
    content: ",";
}
.post-slide .post-bar li a:last-child:after{
    content: "";
}
.post-slide .post-bar li a:hover{
    color: #3d3030;
    text-decoration: none;
}
.post-slide .read-more{
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #e7989a;
    border-bottom-right-radius: 10px;
    text-transform: capitalize;
    transition: all 0.30s linear;
}
.post-slide .read-more:hover{
    background: #333;
    text-decoration: none;
}                 
                

JavaScript

在页面DOM元素加载完毕之后，通过下面的方法来初始化owl-carousel插件。

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