这是一款基于owl-carousel幻灯片插件的人物信息展示jQuery幻灯片特效。这个特效中有2个DEMO,它们通过Bootstrap的网格系统来布局,制作无限循环的人物自动展示效果。
owl-carousel是一款功能强大的支持触摸屏的响应式jQuery旋转木马插件,它可以让你创建漂亮的响应式旋转木马的jQuery插件,它支持移动触摸屏,有丰富的参数设置,甚至可以嵌入视频,功能十分强大。
使用方法
在页面中引入owl-carousel的相关文件,Bootstrap的相关文件,jquery和font-awesome字体图标文件。
<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/owl-carousel/1.3.3/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
HTML结构
DEMO1的HTML结构如下:
<div class="container "> <div class="row"> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="pic"> <img src="images/1.jpg" alt=""/> </div> <div class="testimonial-review"> <h4 class="testimonial-title"> Williamson <small>Web Developer</small> </h4> <p> ...... </p> </div> </div> </div> </div> </div>
DEMO2的HTML结构如下:
<div class="container "> <div class="row"> <div id="testimonial-slider" class="owl-carousel"> <div class="testimonial"> <div class="testimonial-profile"> <a href="#"><img src="images/1.jpg" alt=""></a> </div> <div class="testimonial-content"> <h3 class="testimonial-title"><a href="#">Williamson</a></h3> <span class="testimonial-post">Web Designer</span> <p class="testimonial-description"> ...... </p> <ul class="social-links"> <li><a href="#" class="fa fa-instagram"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-pinterest"></a></li> <li><a href="#" class="fa fa-linkedin"></a></li> </ul> </div> </div> </div> </div> </div>
CSS样式
为幻灯片设置一些基本的CSS样式,下面是DEMO1的CSS样式:
.testimonial{ background-color: #f3f3f3; border-radius: 5px; padding: 30px; margin: 0 15px; } .testimonial .pic{ width: 90px; height: 90px; margin: 0 30px 15px 0; float: left; } .testimonial .pic img{ width: 100%; height: auto; border-radius: 50%; } .testimonial .testimonial-title{ color: #000000; font-size: 16px; margin-top: 5px; font-weight: 800; text-transform: capitalize; } .testimonial .testimonial-title small{ display: block; color: #dc005a; font-size: 14px; font-weight: 800; margin-top: 10px; } .testimonial .testimonial-review p{ color: #888888; font-size: 15px; font-style: italic; line-height: 19px; margin-bottom: 0; } .owl-theme .owl-controls{ margin-top: 20px; } .owl-theme .owl-controls .owl-page span{ width: 10px; height: 10px; background:#fff; opacity: 1; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background: #fff; border: 1px solid #cdcdcd; } .owl-pagination{ margin-top: 40px; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background:#3F4144; border:3px solid #fff; } @media screen and (max-width: 990px){ .testimonial-parallax h2{ margin-bottom: 40px; } .testimonial{ margin: 0; } }
JavaScript
最后在页面DOM元素加载完毕之后,通过owlCarousel()
方法来初始化幻灯片实例。
/* DEMO1 */ $(document).ready(function(){ $("#testimonial-slider").owlCarousel({ items:2, itemsDesktop:[1000,1], itemsDesktopSmall:[979,1], itemsTablet:[768,1], pagination: true, autoPlay:true }); }); /* DEMO2 */ $(document).ready(function(){ $("#testimonial-slider").owlCarousel({ items:2, itemsDesktop:[1000,2], itemsDesktopSmall:[979,2], itemsTablet:[767,1], pagination: true, autoPlay:true }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!