css html js 实现网页滑块展示公司人员资料 cid1064-网页前端设计

作者code

html and css code

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>amazing testimonial design</title>
  6. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
  11. <link rel="stylesheet" href="https://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
  13. <style>
  15. body{
  16. font-family: tahoma;
  17. }
  21. .shadow-effect{
  22. background: white;
  23. padding: 20px;
  24. border-radius: 4px;
  25. text-align: center;
  26. border: 1px solid #ececec;
  27. box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.2);
  28. }
  31. #customers-testimonials .shadow-effect p{
  32. font-family: inherit;
  33. font-size: 17px;
  34. line-height: 1.5;
  35. margin: 0 0 17px 0;
  36. font-weight: 300;
  37. }
  40. .testimonial-name{
  41. margin: -17px auto 0;
  42. display: table;
  43. width: auto;
  44. background: #fc2a93;
  45. padding: 9px 25px;
  46. text-align: center;
  47. color: white;
  48. box-shadow: 0 9px 18px rgba(0,0,0,0.12), 0 5px 7px rgba(0,0,0,0.05);
  49. }
  51. #customers-testimonials .item{
  52. text-align: center;
  53. caption-side: 50px;
  54. margin-bottom: 80px;
  55. opacity: 0.2;
  56. transform: scale3d(0.8, 0.8, 1);
  57. transition: all 0.3s ease-in-out;
  58. }
  63. #customers-testimonials .owl-item.active.center .item{
  64. opacity: 1;
  65. transform: scale3d(1.0, 1.0, 1);
  66. }
  70. .owl-carousel .owl-item img{
  71. transform-style: preserve-3d;
  72. max-width: 90px;
  73. margin: 0 auto 17px;
  74. }
  78. #customers-testimonials.owl-carousel .owl-dots .owl-dot.active span,
  79. #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span{
  80. background: #fa2992;
  81. transform: translate3d(0px, -50%, 0px) scale(0.7);
  82. }
  85. #customers-testimonials.owl-carousel .owl-dots{
  86. display: inline-block;
  87. width: 100%;
  88. text-align: center;
  89. }
  92. #customers-testimonials.owl-carousel .owl-dots .owl-dot{
  93. display: inline-block;
  94. }
  97. #customers-testimonials.owl-carousel .owl-dots .owl-dot span{
  98. background: hotpink;
  99. display: inline-block;
  100. height: 20px;
  101. margin: 0 2px 5px;
  102. transform: translate3d(0px, -50%, 0) scale(0.3);
  103. transform-origin: 50% 50% 0;
  104. transition: all 250ms ease-out 0s;
  105. width: 20px;
  106. }
  116. </style>
  120. </head>
  121. <body>
  124. <section class="testimonials">
  125. <div class="container">
  126. <br><br><br>
  127. <div class="col-sm-12">
  128. <div id="customers-testimonials" class="owl-carousel">
  129. <div class="item">
  130. <div class="shadow-effect">
  131. <img src="1.jpg" class="img-circle" alt="">
  132. <p>
  133. 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.
  134. </p>
  135. </div>
  136. <div class="testimonial-name">
  137. READ MORE
  138. </div>
  139. </div>
  141. <div class="item">
  142. <div class="shadow-effect">
  143. <img src="2.jpg" class="img-circle" alt="">
  144. <p>
  145. 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.
  146. </p>
  147. </div>
  148. <div class="testimonial-name">
  149. READ MORE
  150. </div>
  151. </div>
  154. <div class="item">
  155. <div class="shadow-effect">
  156. <img src="03.jpg" class="img-circle" alt="">
  157. <p>
  158. 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.
  159. </p>
  160. </div>
  161. <div class="testimonial-name">
  162. READ MORE
  163. </div>
  164. </div>
  167. <div class="item">
  168. <div class="shadow-effect">
  169. <img src="06.jpg" class="img-circle" alt="">
  170. <p>
  171. 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.
  172. </p>
  173. </div>
  174. <div class="testimonial-name">
  175. READ MORE
  176. </div>
  177. </div>
  180. <div class="item">
  181. <div class="shadow-effect">
  182. <img src="04.jpg" class="img-circle" alt="">
  183. <p>
  184. 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.
  185. </p>
  186. </div>
  187. <div class="testimonial-name">
  188. READ MORE
  189. </div>
  190. </div>
  198. </div>
  199. </div>
  200. </div>
  201. </section>
  217. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  218. <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js"></script>
  219. <script>
  221. jQuery(document).ready(function($) {
  222. "use strict";
  223. // TESTIMONIALS CAROUSEL HOOK
  224. $('#customers-testimonials').owlCarousel({
  225. loop: true,
  226. center: true,
  227. items: 3,
  228. margin: 0,
  229. autoplay: true,
  230. dots:true,
  231. autoplayTimeout: 8500,
  232. smartSpeed: 450,
  233. responsive: {
  234. 0: {
  235. items: 1
  236. },
  237. 768: {
  238. items: 2
  239. },
  240. 1170: {
  241. items: 3
  242. }
  243. }
  244. });
  245. });
  248. </script>
  249. </body>
  250. </html>
<!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
下载数:73人次, 文件大小: 345.9 KB, 上传日期: 2020年-11 月-27日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,420 人查阅

类似文章