css html js 实现网页滑块展示公司人员资料 cid1064-网页前端设计
html and css code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>amazing testimonial design</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
<style>
body{
font-family: tahoma;
}
.shadow-effect{
background: white;
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.2);
}
#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: #fc2a93;
padding: 9px 25px;
text-align: center;
color: white;
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;
caption-side: 50px;
margin-bottom: 80px;
opacity: 0.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: #fa2992;
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: hotpink;
display: inline-block;
height: 20px;
margin: 0 2px 5px;
transform: translate3d(0px, -50%, 0) scale(0.3);
transform-origin: 50% 50% 0;
transition: all 250ms ease-out 0s;
width: 20px;
}
</style>
</head>
<body>
<section class="testimonials">
<div class="container">
<br><br><br>
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<div class="item">
<div class="shadow-effect">
<img src="1.jpg" class="img-circle" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus unde officiis nostrum at sequi ipsa asperiores quam sapiente numquam itaque eius, esse dolores debitis ex? Cum tempora obcaecati repellendus.
</p>
</div>
<div class="testimonial-name">
READ MORE
</div>
</div>
<div class="item">
<div class="shadow-effect">
<img src="2.jpg" class="img-circle" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus unde officiis nostrum at sequi ipsa asperiores quam sapiente numquam itaque eius, esse dolores debitis ex? Cum tempora obcaecati repellendus.
</p>
</div>
<div class="testimonial-name">
READ MORE
</div>
</div>
<div class="item">
<div class="shadow-effect">
<img src="03.jpg" class="img-circle" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus unde officiis nostrum at sequi ipsa asperiores quam sapiente numquam itaque eius, esse dolores debitis ex? Cum tempora obcaecati repellendus.
</p>
</div>
<div class="testimonial-name">
READ MORE
</div>
</div>
<div class="item">
<div class="shadow-effect">
<img src="06.jpg" class="img-circle" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus unde officiis nostrum at sequi ipsa asperiores quam sapiente numquam itaque eius, esse dolores debitis ex? Cum tempora obcaecati repellendus.
</p>
</div>
<div class="testimonial-name">
READ MORE
</div>
</div>
<div class="item">
<div class="shadow-effect">
<img src="04.jpg" class="img-circle" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel voluptatibus unde officiis nostrum at sequi ipsa asperiores quam sapiente numquam itaque eius, esse dolores debitis ex? Cum tempora obcaecati repellendus.
</p>
</div>
<div class="testimonial-name">
READ MORE
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js"></script>
<script>
jQuery(document).ready(function($) {
"use strict";
// TESTIMONIALS CAROUSEL HOOK
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 0,
autoplay: true,
dots:true,
autoplayTimeout: 8500,
smartSpeed: 450,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
</script>
</body>
</html>
获取源码: ID1064
下载数:71人次, 文件大小: 345.9 KB, 上传日期: 2020年-11 月-27日
公众号回复:gcode 获取解压密码
2,156 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容！立即支付