缩略图控制 / 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"是一个展示如何使用Swiper实现一屏显示三张图片的场景，其中中间图片放大，而两边的图片则缩小，以增强视觉效果。这种设计常见于电商网站、产品展示页面等，能够吸引用户的注意力并...
在这个"swiper轮播图demo示例代码"中，我们可以学习到如何使用Swiper来创建一个基本的轮播图。首先，你需要在HTML文件中引入Swiper的相关CSS和JS文件。这些文件通常可以从Swiper的官方网站下载或者通过CDN链接获取。...
3. **垂直缩略图**：除了水平滑动，Swiper还支持垂直滑动。在描述中提到的垂直缩略图，指的是在主幻灯片下方或侧边显示一列缩略图，用户可以通过点击这些缩略图快速跳转到相应的主幻灯片内容。 4. **水平缩略图片**...
在JavaScript编程中，实现一个带有缩略图的图片切换效果并配备控制按钮是一项常见的需求，尤其是在网站设计和用户界面开发中。这样的功能可以为用户提供更好的交互体验，让他们更轻松地浏览一组图片。以下是对这个...
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的...Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
5. **自动播放**：可以设置轮播图自动播放，时间间隔可调，增强了动态展示的效果。 6. **分页导航**：提供可视化的分页指示器，用户可以清晰地看到当前所处的位置以及总页数。 7. **循环播放**：Swiper支持无限...
基于Swiper 2.7.6实现的带缩略图功能的轮播图-附件资源
在"Swiper-3.0.6.zip"这个压缩包中，包含了Swiper 3.0.6版本的各种DEMO，供开发者参考和学习。 Swiper的核心功能在于其强大的滑动效果，它支持多种设备，包括桌面电脑、平板电脑和手机。Swiper的3.0.6版本可能包含...
本Demo是基于Swiper框架，模仿其官方网站的效果进行制作，旨在展示Swiper的多种功能和应用场景。 Swiper的核心特性包括： 1. **触摸滑动**：Swiper支持触屏设备，用户可以通过手指滑动来切换幻灯片，提供流畅的...
2018年03月20日，项目中要实现一个比较有意思的轮播效果（这个页面要实现好几个轮播），[线上地址](http://http://www.risfond.com/bdm)，Swiper一直用的很顺手，于是继续用Swiper，效果图如下。实际效果一点都不...
在本文中，我们将深入探讨如何使用Swiper库创建一个基于响应式的图片轮播，这个功能在现代网页设计中尤其重要，特别是在手机端。Swiper是一个强大的触摸滑动库，适用于移动设备和平板电脑，同时也兼容桌面环境。它...
总结来说，"swiper图片画廊切换展示特效"利用Swiper.js库创建了一个具有缩略图导航的交互式图片展示组件。这个组件包含了HTML结构、CSS样式和JavaScript逻辑，实现了平滑的图片切换、鼠标拖动以及自适应不同设备的...
这个"swiper4-animate-demo.zip"压缩包包含了一个使用Swiper4实现动画效果的示例项目。Swiper4以其灵活性、高性能和丰富的特性而受到开发者们的欢迎，它支持触摸滑动、多设备兼容性，并且提供了大量的动画选项来增强...
在jquery中使用swiper轮播图，我的博客中tab中显示嵌套的轮播图，tab中嵌套不同的轮播图，这是一个swiper.js代码文件
【标题】"swiperdemo.zip" 是一个包含有关“VueAwesomeSwiper”组件的示例项目的压缩包文件。这个组件是专门为Vue.js框架设计的一个轮播插件，它基于知名的Swiper库进行了封装，使得在Vue应用中实现各种复杂的轮播...
前端开发swiper焦点图实例，类似于https://www.swiper.com.cn/demo/web/index.html所示效果。
"缩略图支持加载进度效果的banner焦点图"是一种创新的设计，它将普通的焦点图与加载进度条结合，增加了用户交互性，提升了页面加载体验。 1. **焦点图基础概念**： 焦点图是一种网页元素，通常用于展示轮播式的多...
本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案，包含了一个可直接使用的demo，下面我们将详细探讨这个轮播代码的关键知识点。 首先，jQuery的`.animate()`方法是实现左右滚动的...
Swiper是一款流行的触摸滑动库，特别适合在移动设备上创建滑动效果，如幻灯片、轮播图以及我们这里的图片预览。 Swiper库不仅提供了基本的滑动功能，还支持许多高级特性，例如分页指示器、自动播放、动态加载、3D...
Swiper是一款广泛应用于Web开发中的触摸滑动框架，尤其适合创建高效的移动设备上的滑动内容，如轮播图、幻灯片等。基于Swiper的上下图轮播共转插件，是Swiper功能的一个独特扩展，它为用户提供了一种创新的交互方式...