缩略图控制 / Swiper互相控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>swiper测试</title> <link rel="stylesheet" href="./swiper.min.css"> <link rel="stylesheet" href="./animate.min.css"> <style type="text/css"> * { margin: 0; padding: 0 } html, body { position: relative; height: 100%; } .swiper-slide{ text-align: center; font-size: 18px; color: red; width: 80%; height: 300px; background-position: center; background-repeat: no-repeat; background-size: 100% auto; display: flex; justify-content: center; align-items: center; } .swiper-slide:nth-child(1){ background-image: url("01.jpg"); } .swiper-slide:nth-child(2){ background-image: url("02.jpg"); } .swiper-slide:nth-child(3){ background-image: url("03.jpg"); } #Swiper-one{ width: 100%; height: 300px; overflow-y: hidden; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; width: 100%; margin-left: auto; margin-right: auto; background-color: black; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; background-size: cover; background-position: center; } .gallery-thumbs .swiper-slide-active { opacity: 1; } </style> </head> <body> <div class="swiper-container gallery-top" id="Swiper-one"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInUp">内容1</p> </div> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p> </div> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInDown">内容3</p> </div> </div> <div class="swiper-scrollbar"></div> </div> <div class="swiper-container gallery-thumbs"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <script src="jquery.min.js"></script> <script src="./swiper.min.js"></script> <script src="./swiper.animate.min.js"></script> <script> var galleryTop = new Swiper('.gallery-top', { spaceBetween: 10, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, }); galleryTop.controller.control = galleryThumbs; galleryThumbs.controller.control = galleryTop; </script> </body> </html>
.
相关推荐
swiper轮播图demo示例代码
轮播图demo,一屏显示三张图片,中间图片放大,两边图片缩小效果。技术是基于swiper的轮播图,提供给大家参考。
jQuery基于Swiper制作垂直缩略图/水平缩略图片滑动切换展示,支持响应式布局。自适应浏览器屏幕大小响应式图片幻灯片特效。
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的...Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
1、鼠标点击缩略图片显示大图片 2、缩略图片可自动控制,点击最后一张小图片时会自动向左(右)移动一张图片,并且有按钮控制所有缩略图片
基于Swiper 2.7.6实现的带缩略图功能的轮播图-附件资源
swiper手机端和pc端的插件,对h5的开发很有用,基本的轮播都有,可以按需修改
2018年03月20日,项目中要实现一个比较有意思的轮播效果(这个页面要实现好几个轮播),[线上地址](http://http://www.risfond.com/bdm),Swiper一直用的很顺手,于是继续用Swiper,效果图如下。实际效果一点都不...
Swiper框架做的一个Demo,模仿Swiper框架官网的效果所制作的一个Demo
Swiper-3.0.6.zip 各种demo集合
基于swiper响应式图片轮播是一款支持按钮控制图片轮播切换代码,适用于手机端的轮播图片。
在jquery中使用swiper轮播图,我的博客中tab中显示嵌套的轮播图,tab中嵌套不同的轮播图,这是一个swiper.js代码文件
前端开发swiper焦点图实例,类似于https://www.swiper.com.cn/demo/web/index.html所示效果。
今天推荐的这款焦点图,与其他焦点图差别不是太大 靓点在于她的缩略图附有进度条loading效果 使用方法简单: 依次调用jquery,html以及CSS文件到你指定的位置即可
vue swiper demo
微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信...
jQuery左右滚动支持图片放大缩略图图片轮播代码(附demo,可直接用)
Swiper-master的Demo
测试csdn小仓库vue-awesome-swiper