swiper实现自动滚动与拖拽滚动效果代码
代码语言:html
所属分类:加载滚动
代码描述:swiper实现自动滚动与拖拽滚动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css"> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; } body{ padding: 100px; background-color: #f2f2f2; } .pd15{ padding: 15px; box-sizing: border-box; } .famous_school_list{ width: 100%; margin-top: 20px; } .famous_school_list .swiper-slide{ width: 255px; } .famous_school_item{ width: 100%; display: flex; flex-direction: column; align-items: center; } .famous_school_item_inner{ width: 100%; } .famous_school_item_top{ width: 100%; height: 57px; position: relative; display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.8); } .famous_school_item_top h3{ color: rgba(255, 255, 255, 0.8); border-left: 4px solid #FFFFFF; font-size: 14px; line-height: 16px; padding-left: 5px; } .famous_school_item_swiper{ width: 100%; height: 290px; padding: 20px 5px 15px 10px; box-sizing: border-box; background-color: #FFFFFF; border-radius: 0px 0px 0px 20px; overflow: hidden; } .famous_school_item_swiper.active{ overflow-y: scroll; } .famous_school_item_swiper .swiper-container{ height: 100%; } .famous_school_item_swiper .swiper-wrapper{ -webkit-transition-timing-function: linear; /*之前是ease-out*/ -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; } .famous_school_item_swiper .swiper-slide{ width: 100%; margin-bottom: 15px; overflow: hidden; } .famous_school_item_list{ width: 100%; height: 260px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .famous_school_item_slide{ color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; margin-bottom: 15px; overflow: hidden; } .famous_school_item_num{ width: 20px; margin-right: 10px; font-weight: bold; font-size: 14px; } .famous_school_item_info{ overflow: hidden; } .famous_school_item_info h4{ font-size: 14px; } .famous_school_item_info p{ color: rgba(0, 0, 0, 0.6); letter-spacing: 0; font-size: 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .famous_school_item_infos{ height: 134px; background: #FFFFFF; border-radius: 20px 0px 0px 20px; padding: 10px; color: #000000; font-size: 10px; margin-top: 10px; } .swiper-pagination{ width: 100%; position: initial; display: none; justify-content: center; margin-top: 15px; } .swiper-pagination-bullet{ width: 6px; height: 6px; background-color: #E6E6E6; opacity: 1; margin: 0 2px; } .swiper-pagination-bullet-active{ background-color: #D5286E; opacity: 1; } </style> </head> <body> <div class="container pd15"> <div class="famous_school_list"> <div class="swiper-container" id="famous_school_list"> <div class="swiper-wrapper"> <!-- 英国十大艺术院校 --> <div class="swiper-slide"> <div class="famous_school_item"> <div class="famous_school_item_inner"> <div class="famous_school_item_top"> <h3>英国十大艺术院校</h3> </div> <div class="famous_school_item_swiper" id="review_box"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">1</p> <div class="famous_school_item_info"> <h4>皇家艺术学院</h4> <p>Royal College of Art</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">2</p> <div class="famous_school_item_info"> <h4>伦敦大学学院</h4> <p>University College London</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">3</p> <div class="famous_school_item_info"> <h4>中央圣马丁艺术与设计学院</h4> <p>Central Saint Martins College of Art and Design</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">4</p> <div class="famous_school_item_info"> <h4>爱丁堡学院</h4> <p>Edinburgh College of Art</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">5</p> <div class="famous_school_item_info"> <h4>切尔西艺术与设计学院</h4> <p>Chelsea College of Art and Design</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">6</p> <div class="famous_school_item_info"> <h4>格拉斯哥艺术学院</h4> <p>The Glasgow School of Art</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">7</p> <div class="famous_school_item_info"> <h4>伦敦传媒学院</h4> <p>London College of Communication</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">8</p> <div class="famous_school_item_info"> <h4>AA建筑联盟学院</h4> <p>Architectural Association School of Architecture</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num">9</p> <div class="famous_school_item_info"> <h4>曼彻斯特大学</h4> <p>University of Manchester</p> </div> </a> </div> <div class="swiper-slide"> <a href="#" class="famous_school_item_slide"> <p class="famous_school_item_num&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0