大佬教程收集整理的这篇文章主要介绍了jquery – 当幻灯片不在原始位置时,idangerous swiper link无法正常工作,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css"> <style> /* Demo Styles */ body { margin: 0; font-family: Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; } .swiper-container { width: 660px; height: 250px; color: #fff; text-align: center; } .red-slide { BACkground: #ca4040; } .blue-slide { BACkground: #4390ee; } .orange-slide { BACkground: #ff8604; } .green-slide { BACkground: #49a430; } .pink-slide { BACkground: #973e76; } .swiper-slide .title { font-style: italic; font-size: 42px; margin-top: 80px; margin-bottom: 0; line-height: 45px; } .pagination { position: absolute; z-index: 20; left: 10px; bottom: 10px; } .swiper-pagination-switch { display: inline-block; width: 8px; height: 8px; border-radius: 8px; BACkground: #222; margin-right: 5px; opacity: 0.8; border: 1px solid #fff; cursor: pointer; } .swiper-visible-switch { BACkground: #aaa; } .swiper-active-switch { BACkground: #fff; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide red-slide"> <div class="title"><a href="http://www.google.com" target="_blank">lets go to google</a></div> </div> <div class="swiper-slide blue-slide"> <div class="title">Slide 2</div> </div> <div class="swiper-slide orange-slide"> <div class="title">Slide 3</div> </div> <div class="swiper-slide green-slide"> <div class="title">Slide 4</div> </div> <div class="swiper-slide pink-slide"> <div class="title">Slide 5</div> </div> <div class="swiper-slide red-slide"> <div class="title">Slide 6</div> </div> <div class="swiper-slide blue-slide"> <div class="title">Slide 7</div> </div> <div class="swiper-slide orange-slide"> <div class="title">Slide 8</div> </div> </div> <div class="pagination"></div> </div> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script> <script> var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination',paginationClickable: true,slidesPerView: 3,loop: true }) </script> </body> </html>
以上是大佬教程为你收集整理的jquery – 当幻灯片不在原始位置时,idangerous swiper link无法正常工作全部内容,希望文章能够帮你解决jquery – 当幻灯片不在原始位置时,idangerous swiper link无法正常工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。