jquery+owl.carousel实现支持手机端的滑块图文轮播效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery+owl.carousel实现支持手机端的滑块图文轮播效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/owl.carousel.min.css"> <style> .shadow-effect { background: #fff; 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.02); } #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: #3190E7; padding: 9px 35px; border-radius: 12px; text-align: center; color: #fff; 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; padding: 50px; margin-bottom:80px; opacity: .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: #3190E7; 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: #3190E7; display: inline-block; height: 20px; margin: 0 2px 5px; transform: translate3d(0px, -50%, 0px) scale(0.3); transform-origin: 50% 50% 0; transition: all 250ms ease-out 0s; width: 20px; border-radius: 10px; } </style> </head> <body> <!-- TESTIMONIALS --> <section class="testimonials"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div id="customers-testimonials" class="owl-carousel"> <!--TESTIMONIAL 1 --> <div class="item"> <div class="shadow-effect"> <img class="img-circle" src="//repo.bfw.wiki/bfwrepo/image/608013b6c1026.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" alt=""> <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p> </div> <div class="testimonial-name">EMILIANO AQUILANI</div> </div> <!--END OF TESTIMONIAL 1 --> <!--TESTIMONIAL 2 --> <div class="item"> <div class="shadow-effect"> <img class="img-circle" src="//repo.bfw.wiki/bfwrepo/image/608013b6c1026.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90" alt=""> <p>Dramatically m.........完整代码请登录后点击上方下载按钮下载查看
网友评论0