缩略图控制 / 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>
.
相关推荐
本项目"jQuery左右滚动支持图片放大缩略图图片轮播代码"提供了一种高效的解决方案，包含了一个可直接使用的demo，下面我们将详细探讨这个轮播代码的关键知识点。 首先，jQuery的`.animate()`方法是实现左右滚动的...
7. **插件扩展**：Swiper社区提供了丰富的插件，如缩略图导航、动态加载等，可以根据实际需求进一步定制淘抢购页面的功能。 在创建"swiper仿淘抢购页面"时，开发者可能需要做以下步骤： 1. **安装Swiper**：首先...
【标题】"附带缩略图的JS图片轮换 2特效代码"涉及到的是网页中一种常见的图片展示技术，即图片轮换效果。在网页设计中，为了吸引用户注意力或者展示多张图片，设计师通常会使用图片轮换功能。这种特效能够自动切换...
缩略图的生成可以在服务器端完成，也可以在客户端通过JavaScript库如sharp或canvas实时生成。QQ空间的预览风格可能涉及到图片的动态裁剪和缩放，以适应不同尺寸的展示区域。 接下来是交互设计。用户在预览图片时...
此外，还可以使用低分辨率的缩略图先展示，然后在用户选择时再加载高清图片，提高加载速度。 7. **权限处理**：在访问用户相册或相机时，需要确保已经获得了相应的权限。可以使用`AVCaptureDevice`和`...
-- 缩略图区域 --> ``` #### 2.2 CSS 样式 - **布局设置**：通过`float`、`width`、`height`等属性控制容器和图片的布局。 - **过渡效果**：使用`transition`或`animation`属性实现图片之间的平滑过渡。 - **...
在此特效中，小图通常是产品的缩略图，而大图则展示了产品的更多细节。当用户点击小图时，大图会相应地滑动展示，这种交互方式既直观又方便。 1. **图片轮播技术**：通常采用JavaScript或者jQuery库来实现。例如，...