swiper轮播，小轮播图，点击变大轮播图（小图变大图）

最新推荐文章于 2024-08-23 16:41:02 发布

A-Select °

最新推荐文章于 2024-08-23 16:41:02 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/weixin_45959504/article/details/108572094

版权

本文介绍如何使用Swiper组件创建一个轮播图，当用户点击小图时，图片会放大展示，实现从小图到大图的过渡效果。通过示例代码，详细解释了关键配置和事件监听。

摘要由CSDN通过智能技术生成

效果图：
请添加图片描述
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>放大轮播</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">
  <style type="text/css">
  	html, body {
  	    position: relative;
  	    height: 100%;
  	}
  	body {
  	    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  	    font-size: 14px;
  	    color:#000;
  	    margin: 0;
  	    padding: 0;
  	}
  	
  	.swiper-container {
  	    width: 510px;
  	    height: 342px;
  	}
  	.swiper-slide {
  	    background-size: cover;
  	    background-position: center;
  	}
  	
  	.gallery-thumbs {
  	    height: 20%;
  	    box-sizing: border-box;
  	    padding: 10px 0;
  	}
  	.gallery-thumbs .swiper-slide {
  	    width: 25%;
  	    height: 100%;
  	    opacity: 0.4;
  	}
  	.gallery-thumbs .swiper-slide-thumb-active {
  	    opacity: 1;
  	}
  	
  	.swiper-big
  	{
  	    opacity:0;
  	}
  	.swiper-big-active
  	{
  	    display:block !important;
  	    opacity:1 !important;
  	}
  	
  	.swiper-big
  	{
  	    position:fixed;
  	    top:0;
  	    left:0;
  	    width:100%;
  	    height:100%;
  	
  	    z-index:9999999;
  	}
  	.swiper-big-bg
  	{
  	    position:absolute;
  	    top:0;
  	    left:0;
  	    width:100%;
  	    height:100%;
  	    background-color: rgba(0, 0, 0, 0.65);
  	}
  	.swiper-container
  	{
  	    margin: unset;
  	}
  	.swiper-big .swiper-container
  	{
  	    margin: auto;
  	    width:80%;
  	    height:100%;
  	
  	}
  	
  	.gallery-thumbs2 {
  	    height: 100px !important;
  	    box-sizing: border-box;
  	    padding: 10px 0;
  	    position:absolute;
  	    bottom:0;
  	    left:0;
  	    right:0;
  	    margin:auto;
  	}
  	.gallery-thumbs2 .swiper-slide {
  	    width: 25%;
  	    height: 100%;
  	    opacity: 0.4;
  	}
  	.gallery-thumbs2 .swiper-slide-thumb-active {
  	    opacity: 1;
  	}
  	.auto-size
  	{
  	    width:100%;
  	    height:100%;