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

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

代码语言：html

所属分类：幻灯片

代码描述：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);
    		}
    		#customers-testimonials .item {
    		    text-align: center;
    		    padding: 50px;
    				margin-bottom:80px;
    		    opacity: .2;
    		    transform: scale3d(0.8, 0.8, 1);
    		    transition: all 0.3s ease-in-out;
    		}
    		#customers-testimonials .owl-item.active.center .item {
    		    opacity: 1;
    		    transform: scale3d(1.0, 1.0, 1);
    		}
    		.owl-carousel .owl-item img {
    		    transform-style: preserve-3d;
    		    max-width: 90px;
        		margin: 0 auto 17px;
    		}
    		#customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
    #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
    		    background: #3190E7;
    		    transform: translate3d(0px, -50%, 0px) scale(0.7);
    		}
    #customers-testimonials.owl-carousel .owl-dots{
    	display: inline-block;
    	width: 100%;
    	text-align: center;
    }
    #customers-testimonials.owl-carousel .owl-dots .owl-dot{
    	display: inline-block;
    }
    		#customers-testimonials.owl-carousel .owl-dots .owl-dot span {
        background: #3190E7;
        display: inline-block;
        height: 20px;
        margin: 0 2px 5px;
        transform: translate3d(0px, -50%, 0px) scale(0.3);
        transform-origin: 50% 50% 0;
        transition: all 250ms ease-out 0s;
        width: 20px;
        border-radius: 10px;
    		}
    </style>

</head>

<body>

    <!-- TESTIMONIALS -->
    <section class="testimonials">
        <div class="container">

            <div class="row">
                <div class="col-sm-12">
                    <div id="customers-testimonials" class="owl-carousel">

                        <!--TESTIMONIAL 1 -->
                        <div class="item">
                            <div class="shadow-effect">
                                <img class="img-circle" src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
                                <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p>
                            </div>
                            <div class="testimonial-name">EMILIANO AQUILANI</div>
                        </div>
                        <!--END OF TESTIMONIAL 1 -->
                        <!--TESTIMONIAL 2 -->
                        <div class="item">
                            <div class="shadow-effect">
                                <img class="img-circle" src="//repo.bfw.wiki/bfwrep.........完整代码请登录后点击上方下载按钮下载查看