幻灯片/轮播

基于owl-carousel人物信息展示jQuery幻灯片特效

创客主机


这是一款基于owl-carousel幻灯片插件的人物信息展示jQuery幻灯片特效。这个特效中有2个DEMO,它们通过Bootstrap的网格系统来布局,制作无限循环的人物自动展示效果。owl-carousel是一款功能强大的支持触摸屏的响应式jQuery旋转木马插件,它可以让你创建漂亮的响应式旋转木马的jQuery插件,它支持移动触摸屏,有丰富的参数设置,甚至可以嵌入视频,功能十分强大。

使用方法:

在页面中引入owl-carousel的相关文件,Bootstrap的相关文件,jquery和font-awesome字体图标文件。

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
  4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  5. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.min.js"></script>

HTML结构:

DEMO1的HTML结构如下:

  1. <div class="container ">
  2.   <div class="row">
  3.     <div id="testimonial-slider" class="owl-carousel">
  4.       <div class="testimonial">
  5.                         <div class="pic">
  6.                             <img src="images/1.jpg" alt=""/>
  7.                         </div>
  8.  
  9.                         <div class="testimonial-review">
  10.                             <h4 class="testimonial-title">
  11.                                 Williamson
  12.                                 <small>Web Developer</small>
  13.                             </h4>
  14.                             <p>
  15.                                 ......
  16.                             </p>
  17.                         </div>
  18.                     </div>
  19.     </div>
  20.   </div>
  21. </div>

DEMO2的HTML结构如下:

  1. <div class="container ">
  2.   <div class="row">
  3.     <div id="testimonial-slider" class="owl-carousel">
  4.       <div class="testimonial">
  5.                         <div class="testimonial-profile">
  6.                             <a href="#"><img src="images/1.jpg" alt=""></a>
  7.                         </div>
  8.                         <div class="testimonial-content">
  9.                             <h3 class="testimonial-title"><a href="#">Williamson</a></h3>
  10.                             <span class="testimonial-post">Web Designer</span>
  11.                             <p class="testimonial-description">
  12.                                 ......
  13.                             </p>
  14.                             <ul class="social-links">
  15.                                 <li><a href="#" class="fa fa-instagram"></a></li>
  16.                                 <li><a href="#" class="fa fa-twitter"></a></li>
  17.                                 <li><a href="#" class="fa fa-pinterest"></a></li>
  18.                                 <li><a href="#" class="fa fa-linkedin"></a></li>
  19.                             </ul>
  20.                         </div>
  21.                     </div>
  22.     </div>
  23.   </div>
  24. </div>

CSS样式:

为幻灯片设置一些基本的CSS样式,下面是DEMO1的CSS样式:

  1. .testimonial{
  2.     background-color: #f3f3f3;
  3.     border-radius: 5px;
  4.     padding: 30px;
  5.     margin: 0 15px;
  6. }
  7. .testimonial .pic{
  8.     width: 90px;
  9.     height: 90px;
  10.     margin: 0 30px 15px 0;
  11.     float: left;
  12. }
  13. .testimonial .pic img{
  14.     width: 100%;
  15.     height: auto;
  16.     border-radius: 50%;
  17. }
  18. .testimonial .testimonial-title{
  19.     color: #000000;
  20.     font-size: 16px;
  21.     margin-top: 5px;
  22.     font-weight: 800;
  23.     text-transform: capitalize;
  24. }
  25. .testimonial .testimonial-title small{
  26.     display: block;
  27.     color: #dc005a;
  28.     font-size: 14px;
  29.     font-weight: 800;
  30.     margin-top: 10px;
  31. }
  32. .testimonial .testimonial-review p{
  33.     color: #888888;
  34.     font-size: 15px;
  35.     font-style: italic;
  36.     line-height: 19px;
  37.     margin-bottom: 0;
  38. }
  39. .owl-theme .owl-controls{
  40.     margin-top: 20px;
  41. }
  42. .owl-theme .owl-controls .owl-page span{
  43.     width: 10px;
  44.     height: 10px;
  45.     background:#fff;
  46.     opacity: 1;
  47. }
  48. .owl-theme .owl-controls .owl-page.active span,
  49. .owl-theme .owl-controls.clickable .owl-page:hover span{
  50.     background: #fff;
  51.     border: 1px solid #cdcdcd;
  52. }
  53. .owl-pagination{
  54.     margin-top: 40px;
  55. }
  56. .owl-theme .owl-controls .owl-page.active span, 
  57. .owl-theme .owl-controls.clickable .owl-page:hover span{
  58.     background:#3F4144;
  59.     border:3px solid #fff;
  60. }
  61. @media screen and (max-width: 990px){
  62.     .testimonial-parallax h2{
  63.         margin-bottom: 40px;
  64.     }
  65.     .testimonial{
  66.         margin: 0;
  67.     }
  68. }

JavaScript:

最后在页面DOM元素加载完毕之后,通过owlCarousel()方法来初始化幻灯片实例。

  1. /* DEMO1 */
  2. $(document).ready(function(){
  3.     $("#testimonial-slider").owlCarousel({
  4.         items:2,
  5.         itemsDesktop:[1000,1],
  6.         itemsDesktopSmall:[979,1],
  7.         itemsTablet:[768,1],
  8.         pagination: true,
  9.         autoPlay:true
  10.     });
  11. });
  12.  
  13. /* DEMO2 */
  14. $(document).ready(function(){
  15.     $("#testimonial-slider").owlCarousel({
  16.         items:2,
  17.         itemsDesktop:[1000,2],
  18.         itemsDesktopSmall:[979,2],
  19.         itemsTablet:[767,1],
  20.         pagination: true,
  21.         autoPlay:true
  22.     });
  23. });
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!