jquery+owl.carousel实现支持手机端的滑块图文轮播效果代码-html代码-BFW代码库

jquery+owl.carousel实现支持手机端的滑块图文轮播效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery+owl.carousel实现支持手机端的滑块图文轮播效果代码

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

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

<head>
    <meta charset="UTF-8">

    <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.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">
 .........完整代码请登录后点击上方下载按钮下载查看