2020年 4月 12日- (星期日) / Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计

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>

在线演示

让链接同时具备两种打开方式