owl.theme实现自适应聚焦左右拖动图标文字轮播图幻灯片效果代码

代码语言:html

所属分类:幻灯片

代码描述:owl.theme实现自适应聚焦左右拖动图标文字轮播图幻灯片效果代码,不拖动就会自动滚动,中间的聚焦突出显示,左右的缩小减淡显示。

代码标签: owl.theme 自适应 左右 拖动 图标 文字 轮播图 幻灯片

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.carousel.2.1.1..css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.theme.default.min.css">
    <style>
        .shadow-effect {
    		    background: #fff;
    		    padding: 20px;
    		    border-radius: 4px;
    		    text-align: center;
    	border:1px solid #ECECEC;
    		    box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02);
    		}
    		#customers-testimonials .shadow-effect p {
    		    font-family: inherit;
    		    font-size: 17px;
    		    line-height: 1.5;
    		    margin: 0 0 17px 0;
    		    font-weight: 300;
    		}
    		.testimonial-name {
    		    margin: -17px auto 0;
    		    display: table;
    		    width: auto;
    		    background: #3190E7;
    		    padding: 9px 35px;
    		    border-radius: 12px;
    		    text-align: center;
    		    color: #fff;
    		    box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0